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

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

你不能，因为它是一个预定义的小部件。

您可以使用 Row 小部件解决它：

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
        ],
      ),
    ),
)

您需要使用_scaffoldKey.currentState.openDrawer()打开抽屉的钥匙。

AutomaticImplyLeading: false将阻止默认抽屉图标。

Answer 2

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

例如 ：

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

Answer 3

一个简单的例子来演示 Raffi Jonas 的回答

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

Answer 4

您想要的是 Flutter 中的自定义应用程序栏。title大多数人尝试在的参数中给出自己的小部件AppBar。但让我告诉你如何正确地做到这一点。

@override
Widget build(BuildContext context) => Scaffold(
    appBar: _appBar(),
    body: _body(),
);

//Custom AppBar
_appBar() => PreferredSize(

    //kToolBarHeight: Default size used by all AppBar widgets in Flutter.
    //MediaQuery...: viewPadding.top is StatusBar area. viewPadding.bottom is iPhone bottom bar.
    
    preferredSize: PreferredSize.fromHeight(kToolBarHeight + MediaQuery.of(context).viewPadding.top),
    child: Container(
        child: Row(
          //This will spread Row content evenly across the screen.
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //Leading Widget
            Icon(Icons.home),

            //Title
            Text("Hello World!"),

            //Trailing Widget / Actions
            Icon(Icons.home),
         ],
      ),
    ),
);

Widget _body() => Container(
    color: Colors.blue,
);