flutter 案例 (一): 搭建界面基础导航框架

首先创建flutter项目

在lib目录下的main.dart 中改成下面的代码
    import 'package:flutter/material.dart';
    import 'package:flutter_trip_ichenkun/navigator/tab_navigator.dart';

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: TabNavigator(),
        );
      }
    }
在lib目录中新建navigator目录,然后新建文件 tab_navigator.dart
import 'package:flutter/material.dart';
import 'package:flutter_trip_ichenkun/pages/home_page.dart';
import 'package:flutter_trip_ichenkun/pages/my_page.dart';
import 'package:flutter_trip_ichenkun/pages/searh_page.dart';
import 'package:flutter_trip_ichenkun/pages/travel_page.dart';

class TabNavigator extends StatefulWidget{
  @override
  _TabNavigatorState createState()=>_TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator>{

  // 默认导航颜色
  final _defaultColor = Colors.grey;
   // 默认导航激活颜色
  final _activeColor = Colors.blue;

  // PageView的控制器
  final PageController _controller = PageController(
    initialPage: 0,
  );  
  // 导航当前索引值
  int _currentIndex= 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 界面容器, 一个可以滚动的列表
      body:PageView(
        controller: _controller,
        // 对应的界面
        children: <Widget>[
          HomePage(),
          SearchPage(),
          TravelPage(),
          MyPage()
        ],
      ),
      // 底部导航菜单
      bottomNavigationBar: BottomNavigationBar(
        // 固定文件一直显示。  如只显示激活状态的使用 BottomNavigationBarType.shifting
        type: BottomNavigationBarType.fixed,
        // 当前激活的索引
        currentIndex: _currentIndex,
        // 当点击时候触发事件,   参数为点击的索引值
        onTap: (index){
          // PageView 跳转
          _controller.jumpToPage(index);
          setState(() {
            // 设置当前索引激活
           _currentIndex = index; 
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.home,
              color: _activeColor,
            ),
            title: Text("首页",
            style:TextStyle(
              color:_currentIndex !=0?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text("搜索",style:TextStyle(
              color:_currentIndex !=1?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text("旅拍",style:TextStyle(
              color:_currentIndex !=2?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,
            ),
            title: Text("我的",style:TextStyle(
              color:_currentIndex !=3?_defaultColor:_activeColor
            ))
          )
        ],
      ),
    );

  }
}
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!