我需要在Flutter中实现以下布局。
当用户滚动时,我希望整个布局都滚动(隐藏标题和标签栏)。但是,我不能将TabBarView嵌套在ListView内,因为TabBarView没有限制的高度,并且ListViews没有为其子代提供限制的高度。
class SliverWithTabBar extends StatefulWidget { @override _SliverWithTabBarState createState() => _SliverWithTabBarState(); } class _SliverWithTabBarState extends State<SliverWithTabBar> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [ SliverAppBar( pinned: false, backgroundColor: Colors.white, flexibleSpace: FlexibleSpaceBar( collapseMode: CollapseMode.pin, background: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( height: 200.0, width: double.infinity, color: Colors.grey, child: FlutterLogo(), ), Padding( padding: const EdgeInsets.all(10.0), child: Text( 'Business Office', style: TextStyle(fontSize: 25.0), textAlign: TextAlign.left, ), ), Padding( padding: const EdgeInsets.all(10.0), child: Text( 'Open now\nStreet Address, 299\nCity, State', style: TextStyle(fontSize: 15.0), textAlign: TextAlign.left, ), ), Padding( padding: const EdgeInsets.only(right: 10.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Icon(Icons.share), Padding( padding: const EdgeInsets.only(left: 10.0), child: Icon(Icons.favorite), ), ], ), ) ], ), ), expandedHeight: 380.0, bottom: TabBar( indicatorColor: Colors.black, labelColor: Colors.black, tabs: [ Tab(text: 'POSTS'), Tab(text: 'DETAILS'), Tab(text: 'FOLLOWERS'), ], controller: controller, ), ) ]; }, body: ListView.builder( itemCount: 100, itemBuilder: (BuildContext context, int index) { return Card( color: index % 2 == 0 ? Colors.blue : Colors.green, child: Container( alignment: Alignment.center, width: double.infinity, height: 100.0, child: Text( 'Flutter is awesome', style: TextStyle(fontSize: 18.0), ), ), ); }, ), ), ); } }
您应该寻找实现的Sliver小部件NestedScrollView。
Sliver
NestedScrollView
这为您提供了 headerSliverBuilder 属性,您可以在其中实际放置一些标题,这些标题可能在滚动正文小部件时隐藏或固定在屏幕顶部,在此特定示例中为a ListView。
ListView
您可能需要看一下RenderSliver文档。