在Flutter AppBar中调整领先小部件的大小 [英] Resize leading widget in flutter AppBar

问题描述

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

I am making a custom AppBar that has a larger height than the typical AppBar. I would like to resize the leading widget/icon as well, and take advantage of the automaticallyImplyLeading default behaviors (so the menu icons and back icons are automatically implemented).

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

This is the solution I thought I would implement:

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是最终的.

But of course this won't work because (child as AppBar).leading is final.

因此，在下面的AppBar中(出于说明目的，文本大小显着变大了)，我想将自动添加的汉堡包图标进行比较.

So in the AppBar below (text size made dramatically larger for illustration purposes), I would like to make the automatically added hamburger icon larger in comparison.

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

What do you think? Are there solutions for this or should I give up on the automatic icons and add them myself?

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

Added an image to show what I mean

推荐答案

您无法使用，因为它是预定义的小部件.

You cant because it is a predefined widget.

您可以使用行"小部件来解决此问题:

You can work around it with a Row widget:

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()打开抽屉.

You need the Key to open the drawer with _scaffoldKey.currentState.openDrawer().

automaticallyImplyLeading:false 将阻止默认抽屉图标.

automaticallyImplyLeading: false will prevent the default drawer Icon.

这篇关于在Flutter AppBar中调整领先小部件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！