如何在应用栏底部设置标题和副标题
how to set title and subtitle at the bottom of App Bar in flutter
我正在设计一个登录页面,我想在应用栏底部显示我的标题和副标题,但没有找到正确的方法
我使用了这个代码:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
centerTitle: false,
titleSpacing: 0.0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () { },
//onPressed: () => Navigator.of(context).pop(),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
],
),
尝试使用 上的答案。您可以使用 AppBar
class 的 bottom
属性 并使用那里的 PreferredSize 小部件。
可能不是最好的解决方案,但会奏效。
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.grey[100],
),
body: Column(
children: [
Container(
color: Colors.grey[100],
padding: EdgeInsets.only(left: 20,top: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
//over here add your rest of the body content
],
),
);
结果:
代码:
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {},
//onPressed: () => Navigator.of(context).pop(),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
),
),
),
)
我正在设计一个登录页面,我想在应用栏底部显示我的标题和副标题,但没有找到正确的方法
我使用了这个代码:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
centerTitle: false,
titleSpacing: 0.0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () { },
//onPressed: () => Navigator.of(context).pop(),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
],
),
尝试使用 AppBar
class 的 bottom
属性 并使用那里的 PreferredSize 小部件。
可能不是最好的解决方案,但会奏效。
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.grey[100],
),
body: Column(
children: [
Container(
color: Colors.grey[100],
padding: EdgeInsets.only(left: 20,top: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
//over here add your rest of the body content
],
),
);
结果:
代码:
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {},
//onPressed: () => Navigator.of(context).pop(),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
),
),
),
)