'tabs' 小部件的高度问题作为其他小部件的子部件，颤动答案

【问题标题】：height issue for 'tabs' widget as a child of other widget, flutter'tabs' 小部件的高度问题作为其他小部件的子部件，颤动
【发布时间】：2021-08-30 09:51:35
【问题描述】：

我正在尝试使用类似于 Twitter 个人资料页面的选项卡布局，其中选项卡布局显示在页面中间。首先，我创建了一个基本布局，其中列作为父级，其他小部件包括选项卡作为子级。代码如下所示

    Column(
    children: [
        Text("some text");
        
        //some image widget
        
        ElevatedButton(
            style: style,
            onPressed: () {},
            child: Text("click me"),
          );
        
        DefaultTabController(
          length: 2,
          child: Flexible( //without flexible wrapper, it throws unbounded height issue.
            child: Column(
              children: [
                TabBar(
                  labelColor: Colors.pink,
                  indicatorColor: Colors.pink,
                  tabs: [
                    Tab(child: Text("Tweets")),
                    Tab(child: Text("Tweets and replies")),
                  ],
                ),
                Expanded(
                  child: new TabBarView(children: [
                    //some widgets here
                  ],),
                )
              ],
            ),
          ),
        );
    ]
    )

但是上面代码的问题是，选项卡布局不会填充剩余空间，而只是填充一些固定空间。

我想用标签覆盖剩余的空间，直到底部。如果我删除父列的剩余子项并保留选项卡，它会按预期填充所有可用空间。

【问题讨论】：

在我的情况下，它正在工作，我用容器包裹了孩子以进行测试。

标签： flutter flutter-layout

【解决方案1】：

如果您遇到任何问题，请flutter clean 并重新启动

结果

测试小部件


class SWidget extends StatelessWidget {
  const SWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("some text"),

          //some image widget

          ElevatedButton(
            // style: style,
            onPressed: () {},
            child: Text("click me"),
          ),

          DefaultTabController(
            length: 2,
            child: Flexible(
              //without flexible wrapper, it throws unbounded height issue.
              child: Column(
                children: [
                  TabBar(
                    labelColor: Colors.pink,
                    indicatorColor: Colors.pink,
                    tabs: [
                      Tab(child: Text("Tweets")),
                      Tab(child: Text("Tweets and replies")),
                    ],
                  ),
                  Expanded(
                    child: new TabBarView(
                      children: [
                        //some widgets here
                        Container(
                          child: Text("item 1"),
                          color: Colors.deepPurple,
                        ),
                        Container(
                          child: Column(
                            children: [
                              Text("item 2"),
                              Text("item 2"),
                            ],
                          ),
                          color: Colors.deepOrange,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如果它确实解决了问题，请告诉我。

【讨论】：