Question

我正在制作一个自定义AppBar，其高度比典型的AppBar高。我也想调整领先的小部件/图标的大小，并利用automaticallyImplyLeading的默认行为（因此菜单图标和后退图标会自动实现）。

这是我想实现的解决方案：

class AppAppBar extends PreferredSize{
  AppAppBar(String title) : super(
    preferredSize: Size.fromHeight(56.0),
    child: AppBar(
      centerTitle: true,
      title: Text(title, style: textStyle)
    )) {
    (child as AppBar).leading = 
        SizedBox(width: 30.0, height: 30.0, child: (child as AppBar).leading);
  }

  static const textStyle = TextStyle(fontSize: 32.0);
}

但是这当然是行不通的，因为(child as AppBar).leading是最终的。

因此，在下面的AppBar中（出于说明目的，文本大小显着变大了），我想比较一下自动添加的汉堡包图标。

您怎么看？有解决方案吗？还是我应该放弃自动图标并自己添加它们？

编辑：添加了一张图片以显示我的意思

Answer 1

您不能，因为它是预定义的小部件。

您可以使用“行”小部件来解决此问题：

Scaffold(
key:_scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
      automaticallyImplyLeading: false
      title: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
              height: 20, // Your Height
              width: 20, // Your width
              child: IconButton( // Your drawer Icon 
                      onPressed: () => _scaffoldKey.currentState.openDrawer()),
                      icon: Icon(Icons.arrow_back, color: Colors.white),
          ),)
          // Your widgets here
        ],
      ),
    ),
)

您需要使用Key才能通过 _scaffoldKey.currentState.openDrawer（）打开抽屉。

automaticallyImplyLeading：false 将阻止默认抽屉图标。

Answer 2

一个简单的例子来演示拉菲·乔纳斯的回答

AppBar(
    automaticallyImplyLeading: false,
    title: Row(
      children: [
        Expanded(
          child: Text('One'),
        ),
        Center(
          child: Text('Two'),
        ),
        Expanded(
          child: Align(
            alignment: Alignment.centerRight,
            child: Text('Three'),
          ),
        ),
      ],
    ),
  ),

Answer 3

您想要的是Flutter中的自定义应用栏。大多数人尝试在title的{{1}}参数中给出自己的小部件。但是，让我向您展示如何正确进行操作。

AppBar

Answer 4

可以使用 leadingWidth 属性调整 Flutter 中 AppBar 的前导 Widget 宽度。

例如：

AppBar(
  title: const Text('Title'),
  leadingWidth: 50,
  leading: Container()
)

Answer 5

要使用自定义 appBar 前导按钮，这里是代码。

 appBar: AppBar(
    title: Text('hello'),
    // automaticallyImplyLeading: false,
    elevation: 0,
    leadingWidth: 58,

    actions: [
      ProfileBar(),
    ],
    leading: Container(
      width: 14,
      //color: Colors.yellow,
      child: Row( // <--- Using row to avoid force resizing of leading 
        children: [
          Padding( // <--- Padding to make it look more nicer
            padding: const EdgeInsets.only(left: 24.0),
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: SvgPicture.asset( // <-- Using SvgPicture package
                'assets/svg/icons/backbtn.svg',
                width: 24,
                height: 24,
              ),
            ),
          ),
        ],
      ),
    ),
  ),

Answer 6

您可以设置高度或宽度的边距。

AppBar(
    leading: Container(
      margin: EdgeInsets.symmetric(vertical: 15),
      child: IconButton(
        icon: Icon(CupertinoIcons.chevron_left),
        onPressed: () {},
      ),
    ),

在Flutter AppBar中调整领先小部件的大小

6 个答案: