如何设置 CupertinoSegmentedControl 高度？答案

【问题标题】：how to set CupertinoSegmentedControl height?如何设置 CupertinoSegmentedControl 高度？
【发布时间】：2018-12-29 13:46:11
【问题描述】：

我正在尝试在AppBar 中使用来自flutter Cupertino 库 中的CupertinoSegmentedControl 使用bottom 属性来实现以下设计（高度= 32）

所以我尝试了以下方法：

@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,
                ));
    }

【问题讨论】：

看我的回答。不知道有没有明白你真正想要的，如果没有帮助，我会删除它。

标签： dart flutter segmentedcontrol

【解决方案1】：

这样的布局是否与您想要的布局相似？（当然是去掉绿色^_^）

使用Container 和PreferredSize 高度来调整高度以满足您的需求。

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 小部件，如下所示：

@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 没有扩展它的高度
@kazimad 你是对的。我完全忘记了这个答案，但再次修改它，我意识到 OP 真正问的是什么。我已经相应地更新了我的答案。

【解决方案2】：

只需将 Padding 小部件或边距属性添加到 Container 并将您的小部件包装在您的“选项卡”集合中（在您的情况下是 this.widget.tabs）

就我而言

CupertinoSegmentedControl<int>(
            children: segmentTextWidgets,
            ...
          ),


final Map<int, Widget> segmentTextWidgets = <int, Widget>{
    0: Container(
      margin: const EdgeInsets.symmetric(vertical: 16),
      child: Text("Tab 1 title"),
    ),
    1: Container(
      margin: const EdgeInsets.symmetric(vertical: 16),
      child: Text("Tab 2 title"),
    ),
  };

【讨论】：

您的答案是正确的，但您可以使用功能最少的示例代码和图像对其进行改进，以便对未来的读者更具教育意义。