栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Instagram Profile标题布局在Flutter中

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Instagram Profile标题布局在Flutter中

您可以使用

NestedScrollView
with 实现此行为
Scaffold
。

由于我们需要在

AppBar
和之间的小部件
TabBar
进行动态构建并滚动直到
TabBar
到达
AppBar
,因此请使用的
appBar
属性
Scaffold
来构建您的文档,
AppBar
并用于
headerSliverBuilder
构建其他高度未知的小部件。使用
body
of
的属性
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(),         )       ],     ),   ), ],          ),        ),      ),    );  }}

输出:

希望这可以帮助!



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/398207.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号