您可以使用
NestedScrollViewwith 实现此行为
Scaffold。
由于我们需要在
AppBar和之间的小部件
TabBar进行动态构建并滚动直到
TabBar到达
AppBar,因此请使用的
appBar属性
Scaffold来构建您的文档,
AppBar并用于
headerSliverBuilder构建其他高度未知的小部件。使用
bodyof
的属性
NestedScrollView来构建选项卡视图。
这样,的元素
headerSliverBuilder就会滚动直到
body到达底部
AppBar。
仅凭文字可能会使您感到有些困惑,这是给您的一个例子。
码:
// InstaProfilePageclass InstaProfilePage extends StatefulWidget { @override _InstaProfilePageState createState() => _InstaProfilePageState();}class _InstaProfilePageState extends State<InstaProfilePage> { double get randHeight => Random().nextInt(100).toDouble(); List<Widget> _randomChildren; // Children with random heights - You can build your widgets of unknown heights here // I'm just passing the context in case if any widgets built here needs access to context based data like Theme or MediaQuery List<Widget> _randomHeightWidgets(BuildContext context) { _randomChildren ??= List.generate(3, (index) { final height = randHeight.clamp( 50.0, MediaQuery.of(context).size.width, // simply using MediaQuery to demonstrate usage of context ); return Container( color: Colors.primaries[index], height: height, child: Text('Random Height Child ${index + 1}'), ); }); return _randomChildren; } @override Widget build(BuildContext context) { return Scaffold( // Persistent AppBar that never scrolls appBar: AppBar( title: Text('AppBar'), elevation: 0.0, ), body: DefaultTabController( length: 2, child: NestedScrollView( // allows you to build a list of elements that would be scrolled away till the body reached the top headerSliverBuilder: (context, _) { return [ SliverList( delegate: SliverChildListDelegate( _randomHeightWidgets(context), ), ), ]; }, // You tab view goes here body: Column( children: <Widget>[ TabBar( tabs: [ Tab(text: 'A'), Tab(text: 'B'), ], ), Expanded( child: TabBarView( children: [ GridView.count(padding: EdgeInsets.zero,crossAxisCount: 3,children: Colors.primaries.map((color) { return Container(color: color, height: 150.0);}).toList(), ), ListView(padding: EdgeInsets.zero,children: Colors.primaries.map((color) { return Container(color: color, height: 150.0);}).toList(), ) ], ), ), ], ), ), ), ); }}输出:
希望这可以帮助!



