具有动态容器高度的TabBarView

时间:2019-02-12 04:13:34

标签: flutter

这是我的布局结构

这是主屏幕

      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,因此Container的高度应该是动态的。

抱歉,我实际上错过了ChildScreen的布局

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(package:flutter / src / rendering / object.dart:1578:12)   I / flutter(493):#3 RenderSliv​​erList.performLayout.advance(package:flutter / src / rendering / sliver_list.dart:200:17)   I / flutter(493):#4 RenderSliv​​erList.performLayout(package:flutter / src / rendering / sliver_list.dart:233:19)   I / flutter(493):#5 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7)   I / flutter(493):#6 RenderSliv​​erPadding.performLayout(package:flutter / src / rendering / sliver_padding.dart:182:11​​)   I / flutter(493):#7 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7)   I / flutter(493):#8 RenderViewportBase.layoutChildSequence(package:flutter / src / rendering / viewport.dart:405:13)   I / flutter(493):#9 RenderViewport._attemptLayout(package:flutter / src / rendering / viewport.dart:1316:12)   I / flutter(493):#10 RenderViewport.performLayout(package:flutter / src / rendering / viewport.dart:1234:20)   I / flutter(493):#11 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7)   I / flutter(493):#12 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:104:13)   I / flutter(493):#13 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7)

5 个答案:

答案 0 :(得分:10)

我在项目中也有类似的任务。 问题的根源在于,您试图将TabBarView(可滚动的窗口部件尝试尽可能大)放置在没有高度的列窗口部件中。

解决方案之一是摆脱可滚动的小部件,该小部件在此示例ListView + Column中包装了TabBarView。并使用NestedScrollView代替它们。您需要将_buildCarousel()和TabBar放在headerSliv​​erBuilder部分中,并将TabBarView放在NestedScrollView正文中。

我不知道您的设计外观如何,但是NestedScrollView默认情况下最多打开100%的屏幕视图高度。因此,如果您想使所有内容都在一个屏幕上,那么可以通过在需要时更改ScrollController的行为来轻松阻止滚动。

在此示例中,我禁止在第三个选项卡上滚动,但是您可以检查网格视图最后一项的可见性。只需将密钥添加到最后一项,然后检查其在屏幕上的位置即可。

希望有帮助。

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final bodyGlobalKey = GlobalKey();
  final List<Widget> myTabs = [
    Tab(text: 'auto short'),
    Tab(text: 'auto long'),
    Tab(text: 'fixed'),
  ];
  TabController _tabController;
  ScrollController _scrollController;
  bool fixedScroll;

  Widget _buildCarousel() {
    return Stack(
      children: <Widget>[
        Placeholder(fallbackHeight: 100),
        Positioned.fill(child: Align(alignment: Alignment.center, child: Text('Slider'))),
      ],
    );
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(_smoothScrollToTop);

    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  _scrollListener() {
    if (fixedScroll) {
      _scrollController.jumpTo(0);
    }
  }

  _smoothScrollToTop() {
    _scrollController.animateTo(
      0,
      duration: Duration(microseconds: 300),
      curve: Curves.ease,
    );

    setState(() {
      fixedScroll = _tabController.index == 2;
    });
  }

  _buildTabContext(int lineCount) => Container(
        child: ListView.builder(
          physics: const ClampingScrollPhysics(),
          itemCount: lineCount,
          itemBuilder: (BuildContext context, int index) {
            return Text('some content');
          },
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (context, value) {
          return [
            SliverToBoxAdapter(child: _buildCarousel()),
            SliverToBoxAdapter(
              child: TabBar(
                controller: _tabController,
                labelColor: Colors.redAccent,
                isScrollable: true,
                tabs: myTabs,
              ),
            ),
          ];
        },
        body: Container(
          child: TabBarView(
            controller: _tabController,
            children: [_buildTabContext(2), _buildTabContext(200), _buildTabContext(2)],
          ),
        ),
      ),
    );
  }
}

enter image description here

获得所需内容的另一种方法可能是创建自定义TabView小部件。

答案 1 :(得分:5)

如果您在 Expanded 时也遇到错误,请不要使用 TabBarView 创建自定义 TabBarView

  1. 从 onTap 获取索引,是 TabBar 的属性。
  2. 然后在 onTap 函数中使用 if else 选择哪个索引并使用索引初始化全局变量。
  3. 然后使用 Builder Widgets 来构建您的 TabBarView。再次在 Builder 中,您将使用 if else 来获取选择的索引。然后在 if else 中返回您的小部件。

在这种情况下,您可以获得小部件的最大或最小高度。您无需指定容器高度。

<块引用>

_selectedTabBar 是一个全局变量

 Column(children: [
               TabBar(
                       onTap: (index) {
                          print(index);                                  
                          setState(() {
                                _selectedTabbar = index;
                          });
                        },
                        tabs: [
                          Tab(
                            text: 'Tab1',
                          ),
                          Tab(
                            text: 'Tab2',
                          ),
                          Tab(
                            text: 'Tab3',
                          ),
                        ],
                      ),
                    
                      Builder(builder: (_) {
                        if (_selectedTabbar == 0) {
                          return Container();//1st custom tabBarView
                        } else if (_selectedTabbar == 1) {
                          return Container();//2nd tabView
                        } else {
                          return Container(); //3rd tabView
                        }
                      }),
]
)

答案 2 :(得分:3)

1- 您需要将您的内容添加到列表中

2- 然后将您的 tabBarView 放入容器中

3- 假设您的项目具有固定高度,将容器的高度定义为小部件的高度,然后乘以您当前的索引内容或列表长度

例如:height: 90*_items.length.toDouble(),

答案 3 :(得分:0)

使用Expanded小部件包装列表视图:

使用扩展窗口小部件会使Row,Column或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'),
              ],
            );
          },
        ))

答案 4 :(得分:0)

工作解决方案: 你需要在两个地方扩展

  1. 在 DefaultTabController 之上。
  2. 容器的容器。
Expanded(
    child: Container(
        decoration: BoxDecoration(
          border: Border(
              top: BorderSide(
                  color: Colors.grey, width: 0.5))),
        child: TabBarView(
          children: <Widget>[
              Container(),
              Container(),
              Container(),
        ])),),

一个还不够。