自定义 AppBar Flutter
Posted
技术标签:
【中文标题】自定义 AppBar Flutter【英文标题】：Custom AppBar Flutter 【发布时间】：2019-05-08 13:14:29 【问题描述】：我正在尝试实现以下目标，
我对颤振很陌生，所以我无法弄清楚。 我需要一个带有抽屉和操作的自定义 AppBar，但像图像一样排列。
我在标题小部件中尝试了 StackView
appBar: AppBar(
title: Stack(
children: <Widget>[
Container(
width: double.infinity,
color: CustomColors.accentColor,
),
Text(
'Title',
style: TextStyle(fontSize: 22.0, color: CustomColors.primaryDark),
),
],
),
),
但是我得到了这样的东西
有人可以帮帮我吗？谢谢。
【问题讨论】：
这不是一个自定义的 AppBar ，它只是一个自定义的小部件 创建您的自定义应用栏小部件：***.com/a/63885062/10563627 【参考方案1】：正如我在评论中提到的，您可以创建一个自定义小部件，就像您附加的图片一样，有很多方法可以做到，这只是一个示例：
class CustomBarWidget extends StatelessWidget
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
@override
Widget build(BuildContext context)
return Scaffold(
key: _scaffoldKey,
body: Container(
height: 160.0,
child: Stack(
children: <Widget>[
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 100.0,
child: Center(
child: Text(
"Home",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
),
),
Positioned(
top: 80.0,
left: 0.0,
right: 0.0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
border: Border.all(
color: Colors.grey.withOpacity(0.5), width: 1.0),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(
Icons.menu,
color: Colors.red,
),
onPressed: ()
print("your menu action here");
_scaffoldKey.currentState.openDrawer();
,
),
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Search",
),
),
),
IconButton(
icon: Icon(
Icons.search,
color: Colors.red,
),
onPressed: ()
print("your menu action here");
,
),
IconButton(
icon: Icon(
Icons.notifications,
color: Colors.red,
),
onPressed: ()
print("your menu action here");
,
),
],
),
),
),
)
],
),
),
);
关于更多信息，我写了一篇关于我们如何自定义 AppBar 的文章：
https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f
【讨论】：
嗨，谢谢你的代码。我能够创建具有类似设计的自定义小部件。我特别说 AppBar 的原因是因为我需要保留 AppBar 的功能，例如在导航上更改为后退图标，控制抽屉。我可以重新创建所有功能，但由于 AppBar 是一个小部件，我们可以自定义它吗？ 感谢代码，它帮助我开始替换 AppBar，因为我无法让 AppBar 完成我需要的工作。我需要 AppBar 工具栏高度大于 56，目前无法做到。 AppBar 的整体高度可以更改，但通过增加它不允许 AppBar 工具栏的高度增加到超过 56。这部分由 Flutter 问题 #7330 和 #23373 引用。 @BrianOh 我写了一篇关于这个的文章：medium.com/flutter-community/…【参考方案2】：截图：
代码：
使用flexibleSpace
Scaffold(
appBar: AppBar(
toolbarHeight: 120, // Set this height
flexibleSpace: Container(
color: Colors.orange,
child: Column(
children: [
Text('One'),
Text('Two'),
Text('Three'),
Text('Four'),
],
),
),
),
)
使用PreferredSize
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(120), // Set this height
child: Container(
color: Colors.orange,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('One'),
Text('Two'),
Text('Three'),
Text('Four'),
],
),
),
),
)
【讨论】：
【参考方案3】：只需将整个内容包装在 Stack 中即可。然后将 AppBar 作为最后一个小部件定位在某个小部件（例如容器）之间，以便 AppBar 可以浮动在它们上方。
Widget setPage()
Color red800 = Colors.red[800];
return Stack(
children: <Widget>[
Container( // Background
child: Center(
child: Text("Home", style: TextStyle(fontSize: 25.0,
fontWeight: FontWeight.w600,
color: Colors.white),),),
color: red800,
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width,
),
Container(), // Required some widget in between to float AppBar
Positioned( // To take AppBar Size only
top: 100.0,
left: 20.0,
right: 20.0,
child: AppBar(
backgroundColor: Colors.white,
leading: Icon(Icons.menu, color: red800,),
primary: false,
title: TextField(
decoration: InputDecoration(
hintText: "Search",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.grey))),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: red800), onPressed: () ,),
IconButton(icon: Icon(Icons.notifications, color: red800),
onPressed: () ,)
],
),
)
],
);
【讨论】：
【参考方案4】：以下是我使用 Stack 和 PreferredSize for AppBar 创建它的方法。使用它允许我们重用默认的 AppBar 属性，例如当我们在正文中有 ListView 时，将 AppBar 粘在屏幕顶部。
_appBar(height) => PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, height+80 ),
child: Stack(
children: <Widget>[
Container( // Background
child: Center(
child: Text("Home", style: TextStyle(fontSize: 25.0,
fontWeight: FontWeight.w600,
color: Colors.white),),),
color:Theme.of(context).primaryColor,
height: height+75,
width: MediaQuery.of(context).size.width,
),
Container(), // Required some widget in between to float AppBar
Positioned( // To take AppBar Size only
top: 100.0,
left: 20.0,
right: 20.0,
child: AppBar(
backgroundColor: Colors.white,
leading: Icon(Icons.menu, color: Theme.of(context).primaryColor,),
primary: false,
title: TextField(
decoration: InputDecoration(
hintText: "Search",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.grey))),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Theme.of(context).primaryColor), onPressed: () ,),
IconButton(icon: Icon(Icons.notifications, color: Theme.of(context).primaryColor),
onPressed: () ,)
],
),
)
],
),
);
在脚手架内部，我们只是调用上面的appbar。我们希望传入 AppBar().preferredSize.height，因为不同设备（例如：iPhone 8 Plus 和 iPhone 11 Pro Max）的默认 appBar 高度不同。
@override
Widget build(BuildContext context)
return Scaffold(
appBar: _appBar(AppBar().preferredSize.height),
body: ListView(),
);
)
【讨论】：
【参考方案5】：截图：
代码（Null Safe）：
为简单起见，我没有创建所需的 UI，我只是想向您展示如何使用 PreferredSize 创建自定义应用栏
创建这个类：
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget
final Widget child;
final double height;
CustomAppBar(
required this.child,
this.height = kToolbarHeight,
);
@override
Size get preferredSize => Size.fromHeight(height);
@override
Widget build(BuildContext context)
return Container(
height: preferredSize.height,
color: Colors.orange,
alignment: Alignment.center,
child: child,
);
用法：
像任何其他AppBar 一样使用它，但这次你可以设置height 属性：
Scaffold(
appBar: CustomAppBar(
height: 120,
child: Column(
children: [
Text('One'),
Text('Two'),
Text('Three'),
Text('Four'),
],
),
),
)
【讨论】：
以上是关于自定义 AppBar Flutter的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 自定义 AppBar 动作并将 Appbar 和 Body 一起传递给父级？
Flutter CustomScrollView 自定义滑动效果