类似的东西与您想要的布局相似吗? (当然要去掉绿色^_^)
玩转Container
and PreferredSize
heights调整高度以满足您的需要。
Scaffold(
appBar: AppBar(
elevation: 2,
backgroundColor: Colors.white,
centerTitle: true,
title:
Text(this.widget.title, style: TextStyle(color: Colors.black)),
bottom: PreferredSize(
child: Row(
children: [
Expanded(
child: Container(
height: 48,
color: Colors.lightGreenAccent,
child: CupertinoSegmentedControl(
children: children,
groupValue: this._selectedTab,
onValueChanged: (value) {
this.setState(() => this._selectedTab = value);
}),
),
)
],
),
preferredSize: Size(double.infinity, 48))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('hello')
]
)
)
);
UPDATE:
正如 kazimad 指出的那样,如果您想增加分段控件的高度,而不仅仅是在应用栏内添加填充,您可以添加Padding
小部件到您的选项卡,如下所示:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 2,
backgroundColor: Colors.white,
centerTitle: true,
title:
Text(this.widget.title, style: TextStyle(color: Colors.black)),
bottom: PreferredSize(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 12),
child: Row(
children: <Widget>[
SizedBox(width: 24),
Expanded(
child: CupertinoSegmentedControl(
children: const <int, Widget>{
0: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Midnight')),
1: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Viridian')),
2: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Cerulean'))
},
groupValue: this._selectedTab,
onValueChanged: (value) {
// TODO: - fix it
}),
),
SizedBox(width: 24)
],
),
),
preferredSize: Size(double.infinity, 48))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('hello')])));
}