前言

自从flutter1.0版本发布之后, 一直想继续对其进行研究, 至于与react-native区别还有flutter初体验,早在1.0版本没发布之前就已经试过了, 本文不在继续说这些. 直接上手实战,实践中遇到问题解决问题,貌似成就感会爆棚.上github上搜索了一下开源的flutter项目, 发现了一个对于学习flutter项目帮助学习的叫flutter go的项目比较不错. 索性站在巨人的肩膀上,既有了UI设计, 内容实际意义也比较不错. 就照着临摹一个吧.当然是需要一步一步来的. 今天首先说一下项目框架的搭建问题吧.效果图如下:

1.png

代码解析

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _HomeState();
  }
}

接下来是_HomeState的类方法以及定义的变量方法

class _HomeState extends State<Home> {
  int _currentIndex = 0; // 控制跳转那个底部路由
  var appBarTitles = ['动态', '组件', '收藏', '手册']; // tabbar显示的文字
  // 包含的4个子页面其中PlaceholderWidget为页面名称
  final List<Widget> _children = [
    new PlaceholderWidget('动态'),
    new PlaceholderWidget('组件'),
    new PlaceholderWidget('组件'),
    new PlaceholderWidget('手册'),
  ];
  ...............
}

接下来是核心代码部分, 指的说的地方有一下几点

1,获取图片资源需要在pubspec.yaml文件中, 允许读取其中该文件如图:

2.png
2, BottomNavigationBar的type属性在tabbar大于3个的时候应设置为fixed状态
3, BottomNavigationBar作为MaterialApp架构下的封装的组件,具有Material Design的设计风格,如果这种分割不被您的设计师看好,让你改变, 那就自己写一个BottomNavigationBar吧. 没别的好办法.哈哈哈(如果有告诉我声哈.拜托拜托)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_new_sel.png'),
              icon: getTabImage('assets/images/ic_tab_new.png'),
              title: getTabTitle(0)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_component_sel.png'),
              icon: getTabImage('assets/images/ic_tab_component.png'),
              title: getTabTitle(1)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_save_sel.png'),
              icon: getTabImage('assets/images/ic_tab_save.png'),
              title: getTabTitle(2)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_mine_sel.png'),
              icon: getTabImage('assets/images/ic_tab_mine.png'),
              title: getTabTitle(3)),
        ],
        iconSize: 24.0,
      ),
    );
  }

最后就是3个方法, 在build中使用到, 通俗易懂

void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  Text getTabTitle(int curIndex) {
    var color;
    if (curIndex == _currentIndex) {
      color = Colors.green;
    } else {
      color = Colors.black;
    }
     return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 14.0, color: color));
  }

  Image getTabImage(path) {
    return new Image.asset(path,
        width: 24.0, height: 24.0, repeat: ImageRepeat.repeat);
  }

最后的最后就是tabbar上的每个子元素的建设,, 本文中只是先创建一下, 为了看效果, 之后的更文中,会改变这段代码. 一共4个一个一个来.

class PlaceholderWidget extends StatelessWidget {
  final String text;

  PlaceholderWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(text),
    );
  }
}

总结

首先就是不要小看这一小段代码,其中包含很多的知识点, 总结一下

1, 里面有更新状态代码
2, 页面初始化传值
3, 图片资源引入
4, 组件与属性的简单用法, 以及运行机制的了解

结束语

下篇更新内容包括: 搜索框, 轮播图, 列表的应用. 如果时间充裕加上跳转传值与回调吧.

Flutter 导航设置

前言

代码解析

总结

结束语

猜你喜欢