IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> flutter使用Scaffold中的bottomNavigationBar创建项目中的首页、个人中心等主页面 -> 正文阅读

[移动开发]flutter使用Scaffold中的bottomNavigationBar创建项目中的首页、个人中心等主页面

flutter优缺点就不说了,最令人崩溃的是遇到各种非常规的bug时无助啊,还好有万能的网友 不bb了~

bottomNavigationBar创建应用主页面简单,但在网上没看到自己想要的:
1.导航栏icon的修改(使用自己的icon而非环境中配置的Icons库中的)
2.切换Tab时,页面的刷新导致的再次数据请求及资源浪费,体验也不好

1关于icon的更换,点就在要在inItState()方法中加载在后面代码里会有
2切换Tab时常规写法一般会这么干
final _pages = [HomePage(),Market(),Mine(),];
body: _pages[_currentIndex]
这样写每次BottomNavigationBar点击切换页面时会重新取一遍_pages,而这会导致HomePage(),Market(),Mine()这三个页面的重建,这样问题就出现了
好了,小菜鸡一个的我就不哔哔了

class MainView extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MainView();
  }
}

class _MainView extends BaseState<MainView>{

  int _currentIndex = 0;
  //final _pages = [HomePage(),Market(),Mine(),];


  final itemNames = [
    _Item("首页",IconConfig.icon_homepage, IconConfig.icon_homepage_unselected),
    _Item("资讯", '', ''),
    _Item("我的", IconConfig.icon_mine_selected, IconConfig.icon_mine_unselected),
  ];

  List<BottomNavigationBarItem> _bottomNavItems;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //_currentIndex = 0;
    if (_bottomNavItems == null) {
      _bottomNavItems = itemNames
          .map((item) => BottomNavigationBarItem(
          icon: item.normalIcon==''?Container(width:ScreenUtil().setWidth(46),height: ScreenUtil().setWidth(46),):Image.asset(
            item.normalIcon,
            width: ScreenUtil().setWidth(46),
            height: ScreenUtil().setWidth(46),
          ),
          title: Text(
            item.lable,
            style: TextStyle(fontSize: ScreenUtil().setSp(32)),
          ),
          activeIcon: item.normalIcon==''?Container(width:ScreenUtil().setWidth(46),height: ScreenUtil().setWidth(46),):Image.asset(
            item.activeIcon,
            width: ScreenUtil().setWidth(46),
            height: ScreenUtil().setWidth(46),
          )))
          .toList();
    }
  }

  @override
  onActivityCreate(BuildContext context) {
    return WillPopScope(child: _body(),
        onWillPop: (){
          return _exitApp();
        });
  }


  _body(){
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //去扫描
          HPermissions.camera().then((_cameraIsGranted) {
            if (_cameraIsGranted) {
              NavigatorUtil.toScannerView(context,);
            } else {
              HPermissions.appSetting();
            }
          });
        },
        child: getTabImageall(IconConfig.icon_big_scanner),
        elevation: 0,
      ),
      floatingActionButtonLocation:
      FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: _bottomNavItems,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.white,
        fixedColor: ColorConfig.blue,
        onTap:(index){

          if(index==1){
            showToast('点了资讯‘);
          }
          if (index != _currentIndex) {
            setState(() {
              _currentIndex = index;
            });
          }
        },
      ),
      body: IndexedStack(
        children: <Widget>[
          HomePage(),Market(),Mine()
        ],
        index: _currentIndex,
      ),
    );
  }

  _exitApp(){
    return getMain().commonDialog(context, '退出应用', '取消', '退出',barr: true,rightClick: (){
      getMain().exitApp();

    },changeColor: true);
  }

  Future<bool> _exitAppDialog(BuildContext context) {
    getMain().jumpToNatFinishApp();
  }

}

class _Item {
  String lable, activeIcon, normalIcon;
  _Item(this.lable, this.activeIcon, this.normalIcon);
}

这是代码,希望能有点用

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-08-06 09:57:05  更:2021-08-06 09:59:20 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 -2025/2/5 22:46:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码