获取“水平视口被赋予无限的高度".颤抖的TabBarView [英] Getting 'Horizontal viewport was given unbounded height.' with TabBarView in flutter

问题描述

我正在尝试创建一个个人资料页面，其中用户信息位于顶部.然后在该标签下面有一个用于其他视图的标签视图.

I'm trying to make a profile page, where the users info is at the top. And then have a tab view below that for different views.

这是我目前正在使用的代码，当我取出TabBarView时，它不会出现错误，并且如果将TabBarView包裹在Expanded中，则会出现错误RenderFlex children have non-zero flex but incoming height constraints are unbounded.上.

This is the code I'm using at the moment, when I take the TabBarView out it doesn't through an error, and if I wrap the TabBarView in an Expanded the error RenderFlex children have non-zero flex but incoming height constraints are unbounded. comes up.

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  minRadius: 45.0,
                  backgroundImage: NetworkImage(
                      'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Testing Name',
                        style: TextStyle(
                          fontSize: 22.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                      Text(
                        '@testing_username',
                        style: TextStyle(
                          fontSize: 13.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          DefaultTabController(
            length: 3,
            child: Column(
              children: <Widget>[
                TabBar(
                  tabs: <Widget>[
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                  ],
                ),

                TabBarView(
                  children: <Widget>[
                    Container(
                      color: Colors.grey,
                    ),
                    Container(
                      color: Colors.green,
                    ),
                    Container(
                      color: Colors.purple,
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

我确实尝试了此的变体，但无法使其正常工作.

I did try a variation of this but couldn't get it to work.

推荐答案

错误说明很清楚， TabBarView没有限制的高度.父窗口小部件也没有限制的高度.因此，扩展小部件将无法解决此问题.

The error description is clear, the TabBarView doesn't have a bounded height. the parent widget also doesn't have a bounded height. So, the Expanded widget will not solve this issue.

以下解决方案适用于上述问题(带有列).一般情况下，将ListView与shrinkWrap: true一起使用.(或其他所有带有rinkWrap的小部件)

below solutions are for above question(with columns).In general cases, use a ListView with shrinkWrap: true.(Or any other widgets with shrinkWrap)

有一些选择:

第一个解决方案:

使用高度限制的小部件(例如SizedBox或AspectRatio)包装父小部件(列).然后使用展开的窗口小部件，如下所示:

Wrap the parent widget(Column) with a limited height widget like SizedBox or AspectRatio. Then use the Expanded widget like this:

child: SizedBox(
          height: 300.0,
          child: Column(
            children: <Widget>[
       .
       .
       .
              Expanded(
                child: TabBarView(
                  children: <Widget>[
                    Container(
                      height: 200.0,
                      color: Colors.grey,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.green,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.purple,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

第二个解决方案:

在TabBarView本身上使用有界小部件，例如SizedBox或AspectRatio:

Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself:

SizedBox(
            height: 300.0,
            child: TabBarView(
                children: <Widget>[
                  Container(
                    height: 200.0,
                    color: Colors.grey,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.green,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.purple,
                  ),
                ],
              ),
            ),

注意:如果高度不是静态的，您还可以动态计算高度.

Note Your can also calcuate the height dynamicly if the height is not static.

这篇关于获取“水平视口被赋予无限的高度".颤抖的TabBarView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！