调整flutter AppBar中前导小部件的大小
调整flutter AppBar中前导小部件的大小
提问于 2018-08-30 01:11:33
我正在制作一个自定义的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中(为了说明目的，文本大小明显变大)，我想让自动添加的汉堡图标在比较中变得更大。
你认为如何？有没有解决这个问题的办法，或者我应该放弃自动图标，自己添加它们？
编辑:添加了一张图片，以显示我的意思
回答 6
Stack Overflow用户
发布于 2019-11-11 22:25:48
您不能这样做，因为它是预定义的小部件。
您可以使用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().打开抽屉的钥匙
automaticallyImplyLeading: false将阻止默认的抽屉图标。
Stack Overflow用户
发布于 2020-10-05 12:06:44
演示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'),
),
),
],
),
),Stack Overflow用户
发布于 2020-10-05 17:38:35
您需要的是Flutter中的自定义应用程序栏。大多数人尝试在AppBar的title参数中提供自己的小部件。但让我向你展示如何正确地做这件事。
@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,
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52082857
复制相关文章
相似问题
腾讯云开发者
