App首页框架搭建--项目实践

1、项目目录结构

2、

代码：

main.dart

import 'package:flutter/material.dart';

import 'navigator/tab_navigator.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabNavigator(),
    );
  }
}

 

tab_navigator.dart

import 'package:flutter/material.dart';
import 'package:flutter_trip/pages/home_page.dart';
import 'package:flutter_trip/pages/my_page.dart';
import 'package:flutter_trip/pages/search_page.dart';
import 'package:flutter_trip/pages/travel_page.dart';

class TabNavigator extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_TabNavigatorState  createState()=>_TabNavigatorState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _TabNavigatorState extends State<TabNavigator>{
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _curentIndex =0;

  final PageController _controller=PageController(
    //初始状态下打开第0个tab
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      //body中定义一个PageView
      body: PageView(
        //pageview中使用一个controller
        controller: _controller,
        //要显示的页面
        //需要显示“首页”、“搜索”、“旅拍”、“我的”
        children: <Widget>[
          HomePage(),
          SearchPage(),
          TravelPage(),
          MyPage()
        ],
      ),

      bottomNavigationBar: BottomNavigationBar(
        //默认当前的界面
          currentIndex: _curentIndex,
          type: BottomNavigationBarType.fixed,      //设置图标和文字一起变化
          onTap: (index){
            //跳到选中的界面
            _controller.jumpToPage(index);
            setState(() {
              _curentIndex=index;
            });
          },
          items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home,color: _defaultColor),
            activeIcon: Icon(Icons.home,color: _activeColor),
            title:Text('首页',style: TextStyle(color: _curentIndex!=0?_defaultColor:_activeColor),)
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.search,color: _defaultColor),
            activeIcon: Icon(Icons.search,color: _activeColor),
            title:Text('搜索',style: TextStyle(color: _curentIndex!=1?_defaultColor:_activeColor),)
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.camera_alt,color: _defaultColor),
            activeIcon: Icon(Icons.camera_alt,color: _activeColor),
            title:Text('旅拍',style: TextStyle(color: _curentIndex!=2?_defaultColor:_activeColor),)
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.account_circle,color: _defaultColor),
            activeIcon: Icon(Icons.account_circle,color: _activeColor),
            title:Text('我的',style: TextStyle(color: _curentIndex!=3?_defaultColor:_activeColor),)
        ),
      ]),
    );
  }

}

 

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_HomePageState  createState()=>_HomePageState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _HomePageState extends State<HomePage>{

  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      body: Center(
        child: Text('首页'),
      )
    );
  }

}

 

my_page.dart

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_MyPageState  createState()=>_MyPageState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _MyPageState extends State<MyPage>{

  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      body: Center(
        child: Text('我的'),
      )
    );
  }

}

 

search_page.dart

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_SearchPageState  createState()=>_SearchPageState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _SearchPageState extends State<SearchPage>{

  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      body: Center(
        child: Text('搜索'),
      )
    );
  }

}

 

travel_page.dart

import 'package:flutter/material.dart';

class TravelPage extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_TravelPageState  createState()=>_TravelPageState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _TravelPageState extends State<TravelPage>{

  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      body: Center(
        child: Text('旅拍'),
      )
    );
  }

}

3、

运行结果：

点击“首页”

 

 

点击“搜索"

 

点击“旅拍”

 

点击"我的"