TabBarView,它在SingleChildScrollView的列中需要包装在指定的高度容器中

时间:2020-04-17 01:55:33

标签: flutter

  1. 我有一个页面,其中包含一个TabBar,一些其他小部件和一个与上述TabBar相关的TabBarView。构建实现如下所示。
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: defaultBackgroundColor),
      child: Stack(children: [
        Image.asset(
          'assets/background/around.jpg',
          width: MediaQuery.of(context).size.width,
          height: 400,
          fit: BoxFit.fill,
        ),
        SingleChildScrollView(
          child: Column(
            children: <Widget>[
              AroundHeader(),
              TabBar(
                controller: _tabController,
                unselectedLabelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.tab,
                labelColor: Colors.blue,
                indicator: BoxDecoration(
                  color: Colors.transparent,
                  border:
                      Border(bottom: BorderSide(color: Colors.blue, width: 3)),
                ),
                tabs: [
                  ...data.map(
                    (item) => Tab(
                      child: Container(
                        child: Align(
                          alignment: Alignment.center,
                          child: Text(item, style: titleStyle),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: commonMargin),
                child: Container(
                  height: MediaQuery.of(context).size.height + 300,
                  width: MediaQuery.of(context).size.width - 2 * commonMargin,
                  child: TabBarView(
                    controller: _tabController,
                    children: <Widget>[
                      AroundRecommend1(),
                      AroundRecommend2(),
                      AroundRecommend3(),
                      AroundRecommend4(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ]),
    );
  }
  1. 由于TabBarView中的内容可能会改变高度,因此,例如AroundRecommend是从Column构建的。
  2. 现在我必须手动计算TabBarView子级的最大高度。
  3. 我尝试用ExplandedSizedBox.expandIntrinsicHeight替换受约束的容器,依此类推,但是它们都失败了,但没有提供高度之类的例外。

1 个答案:

答案 0 :(得分:1)

您希望将小部件包装在Expanded的列中,而不是Column本身

  Column(
      children: <Widget>[
        Expanded(
          child: Container(
             height: 200,
            color: Colors.redAccent,
          ),
        ),
      ],
    );