太原市做网站公司,网站推广网站,divi wordpress json,重庆建设工程标准网题记 —— 执剑天涯#xff0c;从你的点滴积累开始#xff0c;所及之处#xff0c;必精益求精#xff0c;即是折腾每一天。
目前市场上绝大部分App的布局结构基本统一#xff1a;底部导航顶部导航#xff0c;底部导航页里嵌套顶部导航栏#xff0c;顶部导航页里嵌套图文…题记 —— 执剑天涯从你的点滴积累开始所及之处必精益求精即是折腾每一天。
目前市场上绝大部分App的布局结构基本统一底部导航顶部导航底部导航页里嵌套顶部导航栏顶部导航页里嵌套图文列表展示信息可以使用于各种行业。这种风格简洁清晰便于用户阅读。本文将实现这种布局结构力求代码简洁化容易理解。
推荐学习
flutter中文网
flutter开发
启动页main.dart
import package:flutter/material.dart;
import package:flutter_play/bottomNavigationBar.dart;/*启动页*/
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(), //主题home: const MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key});overrideStateMyHomePage createState() _MyHomePageState();
}class _MyHomePageState extends StateMyHomePage {int _bottomNavigationIndex 0; //底部导航的索引overrideWidget build(BuildContext context) {return Scaffold(body: pages[_bottomNavigationIndex], //页面切换bottomNavigationBar: _bottomNavigationBar() //底部导航);}//底部导航-样式BottomNavigationBar _bottomNavigationBar(){return BottomNavigationBar(items: items(), //底部导航-图标和文字的定义封装到函数里currentIndex: _bottomNavigationIndex,onTap: (flag) {setState(() {_bottomNavigationIndex flag; //使用底部导航索引});}, //onTap 点击切换页面fixedColor: Colors.blue, //样式图标选中时的颜色蓝色type: BottomNavigationBarType.fixed, //样式选中图标后的样式是固定的);}}
底部导航页bottomNavigationBar.dart
import package:flutter/material.dart;
import package:flutter_play/index.dart;
import package:flutter_play/find.dart;
import package:flutter_play/shop.dart;
import package:flutter_play/home.dart;//底部导航页-切换页面
final pages [IndexPage(), //首页FindPage(), //发现页ShopPage(), //商城页HomePage() //个人主页
];//底部导航-图标和文字定义
ListBottomNavigationBarItem items(){return [const BottomNavigationBarItem(icon: Icon(Icons.home),label: 首页,),const BottomNavigationBarItem(icon: Icon(Icons.find_in_page),label: 发现,),const BottomNavigationBarItem(icon: Icon(Icons.shop),label: 商城,),const BottomNavigationBarItem(icon: Icon(Icons.local_activity),label: 我的,),];
}
顶部导航栏index.dart (首页) 嵌套顶部导航布局
import package:flutter/material.dart;
import package:flutter_play/recommend.dart;/*首页
* 嵌入顶部导航栏 TabBar
* 导航栏嵌入图文列表 ListView
* */
class IndexPage extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: const TabBar(tabs: [Tab(text: 推荐),Tab(text: 资讯),Tab(text: 科技),],),),body: TabBarView(children: [RecommendPage(), // 推荐页内部嵌套ListViewconst Icon(Icons.directions_transit),const Icon(Icons.directions_bike),],),),),);}
}
图文列表页: recommend.dart (推荐页)
import package:flutter/material.dart;/*推荐页*/
class RecommendPage extends StatelessWidget {final ListString items ListString.generate(50, (i) 标题 $i);overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: ListView.builder(itemCount: items.length,// prototypeItem 计算预加载需要的空间内容和下面的ListTile相同prototypeItem: ListTile(title: Text(items.first),subtitle: Text(items.first),trailing: Image.asset(images/mobile.jpg,fit: BoxFit.fill,width: 128,height: 64),),itemBuilder: (context, index) {// ListTile 实际展示的列表内容return ListTile(title: Text(items[index]), //大标题subtitle: Text(items[index]), //小标题trailing: Image.asset(images/mobile.jpg,fit: BoxFit.fill,width: 64,height: 64),);},),),);}}
