dart 如何为AppBar上的前导图标和动作图标添加填充?

xienkqul  于 2023-07-31  发布在  其他
关注(0)|答案(2)|浏览(92)

我想给AppBar上的图标添加填充。
我尝试用Padding() Package 图标,但这只会将它们挤压到分配的空间中--而不是我给予它的空间。

Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 10),
      child: const Icon(
        image: Icon(""),
        width: 50,
        height: 50,
      ),
    );
  }

字符串
我的应用程序栏目前看起来像这样
x1c 0d1x的数据
使用代码:

Widget build(BuildContext context) {
    return AppBar(
      leading: RedBlock(),
      actions: [YellowBlock()],
      backgroundColor: Theme.of(context).primaryColor,
    );
  }
}


我想把这两个图标向中间推一点,像这样:


什么是最好的方式来实现这一点?

8zzbczxx

8zzbczxx1#

您可以实现PreferredSizeWidget来创建自定义appBar。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 10,right:10),//adjust the padding as you want
      child: AppBar(), //or row/any widget
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

字符串
现在可以使用MyAppBar代替appBar:MyAppBar()

n9vozmp4

n9vozmp42#

您可以使用Padding小部件来 Package 图标并相应地调整padding值。此外,您可以使用“列”Widget来对齐leading和动作图标horizontally

appBar: AppBar(
      title: Text('My App'),
      leading: Padding(
        padding: EdgeInsets.only(left: 16.0),
        child: Icon(
          Icons.menu,
          size: 24,
        ),
      ),
      actions: [
        Padding(
          padding: EdgeInsets.only(right: 16.0),
          child: Icon(
            Icons.search,
            size: 24,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(right: 16.0),
          child: Icon(
            Icons.more_vert,
            size: 24,
          ),
        ),
      ],
    ),

字符串
可以根据需要调整填充值以获得所需的间距。

相关问题