1-2.页面结构

我们在主文件为 main.dart 文件，里面有一个人入口文件 runApp 。

一般我们写页面的时候需要分模块来写。

页面入口，我首先拿底部一个【导航条】导航条切换。

main.dart 文件

import 'package:flutter/material.dart';
import 'package:flutter_app/app/app_scence.dart';
void main() {
  runApp(AppScene());
}

app_scence.dart 文件

import 'package:flutter/material.dart';
import 'package:flutter_app/app/root_scence.dart';
import 'package:provider/provider.dart';
import 'app_color.dart';
class AppScene extends StatelessWidget {
  Widget build(BuildContext context){
    print("根本构建：$context");
    // 使用状态管理
    return MultiProvider(
      providers : [
        // 这里应该是通知吧。
        ChangeNotifierProvider(create: (value){
          print("根部执行状态管理！");
        } )
      ],
      child: MaterialApp(
        title : "AYuWei",
        debugShowCheckedModeBanner:false, // 测试的时候不显示debug图标。
        theme: ThemeData(
          primaryColor : Color(0xff437DFA),
          dividerColor : Color(0xffEEEEEE),
          scaffoldBackgroundColor : AppColor.paper,
          textTheme: TextTheme(
            bodyText1 : TextStyle( color : AppColor.darkGrey )
          )
        ),
        home: RootScene(),
      )
    );
  }
}
/**
 * 状态管理都需要使用到 provider包。
 */

app根部构建RootScene, 文件路径root_scence.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/exchange/exchange_scene.dart';
import 'package:flutter_app/pages/home/home.dart';
import 'package:flutter_app/pages/my/my_scene.dart';
import 'package:flutter_app/pages/profit/profit_scene.dart';
import 'package:flutter_app/pages/promotion/promotion_scene.dart';
class RootScene extends StatefulWidget {
  @override
 _RootScene createState() => _RootScene();
}
class _RootScene extends State<RootScene>{
  int _tabIndex = 0;
  int _currentIndex = 0;  // 当前底部导航条的索引下表。
  // 存储切换页面
    final List<Widget> _children = [HomeScene(), ExchangeScene(), ProfitScene(), PromotionScene(), MyScence() ];
  Widget build(BuildContext context){
    // 存储页面底部导航条信息
    final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
       BottomNavigationBarItem(
         icon: Icon(Icons.home),
         title: Text("首页")  
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.attach_file),
         title: Text("委托购买")  
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.attach_money),
         title: Text("收益")  
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.people),
         title: Text("推广")  
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.tag_faces),
         title: Text("我的")  
       ),
    ];
    return Scaffold(
      body: Container(
        child : _children[_tabIndex],
      ),
      // 底部导航条。
      bottomNavigationBar: BottomNavigationBar(
        items: _list,
        type : BottomNavigationBarType.fixed, // fixed 将导航条固定在底部。
        onTap: onTapTapped, // 当点击的时候获取下标
        currentIndex: _currentIndex,
        // backgroundColor: Colors.grey[400] // 设置背景色
        // 还有详情请查看源码。
      ),
    );
  }
  void onTapTapped(index){
    print(index);
    setState(() {
      _currentIndex = index;
      _tabIndex = index;
    });
  }
}

my_scene.dart 文件

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyScence extends StatefulWidget {
  @override
 _MyScence createState() => _MyScence();
}
class _MyScence extends State<MyScence>{
    Widget build(BuildContext context){
      return Scaffold(
          appBar: AppBar(
            title: Text("我的"),
            centerTitle: true, // 标题是否居中
            backgroundColor: Colors.green[400], // 头部背景色。
          ),
          body: ListView(
            children : <Widget>[
              Text("我的页面", textAlign: TextAlign.center ),
            ]
          ),
      );
    }
}

一共有五个页面，这个是我的页面，其余的结构类似。

写了那么多还是拿图说话吧。