扬中企业网站优化哪家好公司网站建设注意点

扬中企业网站优化哪家好,公司网站建设注意点,建网站软件有哪些,网站竞价推广托管公司昨天把底部导航栏外观完成了#xff0c;但是点击还不能切换#xff0c;今天把点击功能添加上#xff0c;并且完善浏览区。BottomNavigationBar 组件自带 onTap 方法并自动传入当前点击的 index#xff0c;需要定义一个存放导航栏按钮索引的变量#xff0c;在无状态类中添加…昨天把底部导航栏外观完成了但是点击还不能切换今天把点击功能添加上并且完善浏览区。BottomNavigationBar 组件自带 onTap 方法并自动传入当前点击的 index需要定义一个存放导航栏按钮索引的变量在无状态类中添加变量、补充onTap方法即可class _MainPageState extends StateMainPage { // 本节关键代码 // 存放点击索引 int _currentIndex 0; // 底部导航条定义好了基本不会变所以声明 final final ListTabListItem _tabList [ TabListItem( icon: Icon(Icons.home, color: Colors.grey), activeIcon: Icon(Icons.home, color: Colors.black), text: 首页 ), TabListItem( icon: Icon(Icons.shopping_cart, color: Colors.grey), activeIcon: Icon(Icons.shopping_cart, color: Colors.black), text: 购物车 ), TabListItem( icon: Icon(Icons.person, color: Colors.grey), activeIcon: Icon(Icons.person, color: Colors.black), text: 我的 ), ]; ListBottomNavigationBarItem _getTabBarWidget() { return List.generate(_tabList.length, (int index) { return BottomNavigationBarItem( icon: _tabList[index].icon, activeIcon: _tabList[index].activeIcon, label: _tabList[index].text, ); }); } override Widget build(BuildContext context) { return Scaffold( body: Center(child: Text(主页)), bottomNavigationBar: BottomNavigationBar( items: _getTabBarWidget(), // 本节关键代码 onTap: (int index) { _currentIndex index; setState(() {}); }, currentIndex: _currentIndex, ), ); } }接下来处理显示区域显示区域都需要避开屏幕上方挖孔或者刘海下方要显示内容要避开昨天做得导航栏以便于完整显示。正好 Flutter 有自动处理这些问题的组件SafeArea() 用于设置显示安全区域。另外每个导航功能的页面是堆叠放置每点击一个导航按钮把堆叠的页面置顶就可以显示出来了可以用一个组件处理堆叠IndexedStack()把 Scaffold() 下面的 body: Center() 组件替换为 SafeArea() 。IndexedStack() 里面有一个 children:[] 属性我们同样用函数来处理子 widget 再把导航栏点击获取的 index 变量传过来赋值给 index 属性就可以控制页面堆叠显示了。三个页面组件比较多来建立三个目录HomeCartInfo每个目录下面建立 index.dart 每个页面都使用有状态组件如下代码如下// 本节关键代码 ListWidget _getChildren() { return [ HomeView(), CartView(), InfoView(), ]; } override Widget build(BuildContext context) { return Scaffold( // 本节关键代码 body: SafeArea(child: IndexedStack( index: _currentIndex, // 配合点击传来的 index 变量 children: _getChildren(), )), bottomNavigationBar: BottomNavigationBar( items: _getTabBarWidget(), onTap: (int index) { _currentIndex index; setState(() {}); }, currentIndex: _currentIndex, ), ); } }点击导航栏显示对应页面完成效果