代码之家 › 专栏 › 技术社区 › stuckedunderflow

具有动态容器高度的TabbarView

flutter

stuckedunderflow · 技术社区 · 6 年前

所以这是我的布局结构

这是主屏幕

      ListView(
          children: <Widget>[
              _buildCarousel(),
              _buildHomeTabBar(),
          ],
      )

这是HomeTabbar屏幕

SingleChildScrollView(
  child:
    DefaultTabController(
      length: myTabs.length,
      initialIndex: 0,
      child: Column(
        children: [
          TabBar(
            isScrollable: true,
            tabs: myTabs,
          ),
          Container(
            height: 600,
              child: 
              TabBarView(
                children: [
                  ChildScreen(),
                  ChildScreen2(),
                  ChildScreen3(),
                ],
              )
          )
        ],
      ))
);

我想摆脱集装箱的高度。我们怎么做?

childscreen正在从rest获取数据它实际上是一个gridview.builder,因此容器的高度应该是动态的。

抱歉,我错过了儿童屏幕的布局实际上是这样的

SingleChildScrollView(
  // shrinkWrap: true,
child: Column(
    children: <Widget>[
        StreamBuilder(
          stream: categoryBloc.categoryList,
          builder: (context, AsyncSnapshot<List<Category>> snapshot){
              if (snapshot.hasData && snapshot!=null) {
                if(snapshot.data.length > 0){
                  return buildCategoryList(snapshot);
                }
                else if(snapshot.data.length==0){
                    return Text('No Data');
                }
              }
              else if (snapshot.hasError) {
                return ErrorScreen(errMessage: snapshot.error.toString());
              }     
              return Center(child: CircularProgressIndicator());

          },
        ),       
    ]
  )
);

所以streambuilder内部是gridview.builder。最主要的是我想去掉容器的高度。在不同的设备上看起来很难看…

所以如果我去掉高度,它就不会显示在屏幕上并且抛出错误

i/flutter(493):2 renderobject.layout(包:flutter/src/rendering/object.dart:1578:12) i/flutter(493):3 rendersliverlist.performlayout.advance(包:flutter/src/rendering/sliver_list.dart:200:17) i/flutter(493):4 rendersliverlist.performlayout(包:flutter/src/rendering/sliver_list.dart:233:19) i/flutter(493):5 renderobject.layout(包:flutter/src/rendering/object.dart:1634:7) i/flutter(493):6 rendersliverpadding.performlayout(包:flutter/src/rendering/sliver_padding.dart:182:11) i/flutter(493):7 renderobject.layout(包:flutter/src/rendering/object.dart:1634:7) i/flutter(493):8 renderviewportbase.layoutchildsequence(包:flutr/src/rendering/viewport.dart:405:13) i/颤振(493):9 renderviewport._attemptlayout(包装:颤振/src/rendering/viewport.dart:1316:12) I/颤振(493):10 renderviewport.performlayout(包装:颤振/src/rendering/viewport.dart:1234:20) i/flutter(493):11 renderobject.layout(包:flutter/src/rendering/object.dart:1634:7) i/flutter(493):12 renderProxyBox&renderBox&renderBox&renderBobjectWithChildMixin&renderProxyBoxMixin.performLayout(软件包:flutr/src/renderBox/proxyBox.dart:104:13) i/flutter(493):13 renderobject.layout(包:flutter/src/rendering/object.dart:1634:7)

1 回复 | 直到 6 年前

David rakar 6 年前

用一个 Expanded 小装置:

使用展开的小部件可以使行、列或flex的子级展开以填充主轴中的可用空间(例如,水平展开行或垂直展开列)。如果展开了多个子项,则可用空间将根据弹性因子在这些子项之间进行划分。

Expanded(
          child: ListView.builder(
          itemCount: 120,
          itemExtent: 32,
          itemBuilder: (BuildContext context, int index) {
            return new Row(
              children: <Widget>[
                Icon(Icons.access_alarm),
                Text(' Entry $index'),
              ],
            );
          },
        ))