Flutter中不使用Expanded如何设置TabBarView?
问题描述

当前使用的Flutter代码:
DefaultTabController( animationDuration: Duration.zero, length: 2, child: Column( children: [ Expanded( flex: 1, child: TabBarView( physics: const ScrollPhysics(), controller: _tabController, children: [ WeekDaysTimeSlot(), WeekEndsTimeSlot(), ], ), ), ], ), )
目前用Expanded让TabBarView占满全屏,但需求是:数据较少时让内容适配屏幕高度,数据增多时页面可以滚动。
解决方案
方案1:用CustomScrollView+SliverFillRemaining实现
把外层Column替换成CustomScrollView,用SliverFillRemaining包裹TabBarView。这个组件会在子内容高度不足时填充剩余屏幕空间,内容超出时自动允许滚动:
DefaultTabController( animationDuration: Duration.zero, length: 2, child: CustomScrollView( slivers: [ SliverFillRemaining( hasScrollBody: false, child: TabBarView( physics: const AlwaysScrollableScrollPhysics(), controller: _tabController, children: [ WeekDaysTimeSlot(), WeekEndsTimeSlot(), ], ), ), ], ), )
方案2:给子组件单独套滚动容器
直接给WeekDaysTimeSlot和WeekEndsTimeSlot外层包裹SingleChildScrollView,同时去掉Expanded,让TabBarView根据子组件高度自适应:
DefaultTabController( animationDuration: Duration.zero, length: 2, child: Column( children: [ TabBarView( physics: const NeverScrollableScrollPhysics(), // 让Tab切换由控制器处理,子组件自行滚动 controller: _tabController, children: [ SingleChildScrollView(child: WeekDaysTimeSlot()), SingleChildScrollView(child: WeekEndsTimeSlot()), ], ), ], ), )
注意:如果父容器Column出现溢出,可在外层套SafeArea或Container配合constraints限制范围。
方案3:结合LayoutBuilder动态适配
通过LayoutBuilder获取父容器可用高度,对比子组件实际高度,动态决定是否启用滚动:
DefaultTabController( animationDuration: Duration.zero, length: 2, child: LayoutBuilder( builder: (context, constraints) { return Column( children: [ SizedBox( height: constraints.maxHeight, child: TabBarView( controller: _tabController, children: [ _buildAdaptiveContent(constraints.maxHeight, WeekDaysTimeSlot()), _buildAdaptiveContent(constraints.maxHeight, WeekEndsTimeSlot()), ], ), ), ], ); }, ), ) // 辅助构建方法 Widget _buildAdaptiveContent(double maxHeight, Widget child) { return SingleChildScrollView( child: ConstrainedBox( constraints: BoxConstraints(minHeight: maxHeight), child: child, ), ); }
内容的提问来源于stack exchange,提问作者aakib khilji
相关产品推荐
相关产品推荐

