[英]Custom AppBar Flutter
我对颤振很陌生,所以我无法弄清楚。 我需要一个带有抽屉和动作的自定义 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),
),
],
),
),
有人可以帮我吗? 谢谢你。
正如我在评论中提到的,您可以创建一个像附加图像一样的自定义小部件,有很多方法可以做到,这只是一个例子:
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 : AppBar
截屏:
代码:
使用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'), ], ), ), ), )
只需将整个内容包装在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: () {},)
],
),
)
],
);
}
这是我使用 Stack 和 PreferredSize 为 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 因为默认的 appBar 高度在不同的设备上是不同的(例如:iPhone 8 Plus 和 iPhone 11 Pro Max)。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appBar(AppBar().preferredSize.height),
body: ListView(),
);
})
截屏:
代码(空安全):
为简单起见,我没有创建所需的 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'),
],
),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.