Flutter学习之Bottomnavigator

main.dart

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

void main()=> runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter bottomNavigationBar',
      theme:ThemeData.light(),
      home:BottomNavigationWidget()
    );
  }
}

bottom_navigation_widget.dart

import 'package:flutter/material.dart';

void main(){
  runApp(BottomNavigationWidget());
}

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  @override
  final _bottomColor = Colors.blue;
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home,color: _bottomColor),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.map,color: _bottomColor),
            title: Text("地图")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timer,color: _bottomColor),
            title: Text("计时")
          ),
        ],
      )
    );
  }
}

这个实例里有两个文件，一个是main这个入口方法以及materia类，调用了bottom_navigation_widget.dart里的BottomNavigationWidget动态类。

新的知识点

1. 创建一个有状态类是需要继承两个类，StatefulWidget类和State。
2. 变量命名前加_的变量作用域是只在类内(这点和python一样)。
3. 然后就是buttomNavigationBar属性里的ButtomNavigationBar组件，设置Item属性，然后item属性内放ButtomNavigationItem组件。