如何设置CupertinoSegmentedControl高度? [英] how to set CupertinoSegmentedControl height?
问题描述
我正在尝试从 AppBar
中的 Cupertino库中使用 CupertinoSegmentedControl
使用bottom属性实现以下设计(高度= 32)
I am trying to use CupertinoSegmentedControl
from the flutter Cupertino library in the AppBar
using the bottom attribute to achieve the following design (height = 32)
so我尝试了以下操作:
so I tried the following :
@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: this.widget.tabs,
groupValue: this._selectedTab,
onValueChanged: (value) {
this.setState(() => this._selectedTab = value);
this._tabController.animateTo(value);
}
),
),
SizedBox(width: 24)
],
),
),
preferredSize: Size(double.infinity, 48)
)
),
body: new TabBarView(
controller: this._tabController,
children: this.widget.views,
));
}
推荐答案
类似于您想要的布局? (删除绿色,当然是^ _ ^)
Is something like that similar to the layout that you want? (Removing the green color of course ^_^)
试玩 Container
和 PreferredSize
高度来调整高度以适合您的需求。
Play around with the Container
and PreferredSize
heights to adjust the height to fit your needs.
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')
]
)
)
);
更新:
正如kazimad指出的那样,如果您要增加分段控件的高度,而不仅要添加填充到它可以插入应用栏,您可以在标签中添加 Padding
小部件,如下所示:
As kazimad pointed out, if you want to increase the segmented control height and not only add padding to it insiede the app bar, you can add a Padding
widget to your tabs, like that:
@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')])));
}
这篇关于如何设置CupertinoSegmentedControl高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!