Flutter基础框架搭建

一个基础的App架构主要有：导航  分栏   页面 等几部分组成基础样式如下图

下面咱们开始讲解怎么实现的

1.首先我们要在main.dart的页面创建一个MaterialApp的容器来布局基础代码如下

---

import 'package:flutter/material.dart';

import './tabs/tabs.dart';

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

class MyApp extends StatelessWidget { 

 @override 

 Widget build(BuildContext context) { 

         return MaterialApp( 

                 title: "百姓生活", 

                 theme: ThemeData( 

                         primaryColor: Colors.pink

                    ),

                 home: Tabs(),

                ); 

         }

}

---

2.代码直接粘过去会报错 ,因为找不到tabs这个dart文件, 第二部创建一个tabs.dart文件并将文件路径引入mai n.dart 开始写tabs.dart文件中的代码

---

import 'package:flutter/material.dart';

import '../pags/fristpage.dart';

import '../pags/secondpage.dart';

import '../pags/threepage.dart';

import '../pags/fourpage.dart';

class Tabs extends StatefulWidget { 

 @override 

 _TabsState createState() => _TabsState();

} 

class _TabsState extends State { 

     int currentIndex = 0; 

     final List _pageList = [ 

             FristPage(), 

             SecondPage(), 

             ThreePage(), 

             FourPage() 

        ]; 

        @override

         Widget build(BuildContext context) { 

                 return Scaffold(

                        body: _pageList[this.currentIndex],                                                                         bottomNavigationBar: BottomNavigationBar( 

                                     type: BottomNavigationBarType.fixed,

                                     currentIndex: this.currentIndex, 

                                     onTap: (int index){ 

                                             setState(() { 

                                                 this.currentIndex = index;

                                                 }); 

                                     },

                                 items: [ 

 BottomNavigationBarItem(

                                            icon: Icon(Icons.access_alarm), 

                                            title: Text("首页") ),                         BottomNavigationBarItem( 

                                             icon: Icon(Icons.access_alarm), 

                                             title: Text("次页") ),             BottomNavigationBarItem(

                                             icon: Icon(Icons.access_alarm), 

                                             title: Text("中页") ), BottomNavigationBarItem(

                                             icon: Icon(Icons.access_alarm),

                                             title: Text("末页") ), 

                                 ] ),

                     );

            }

}

---

3.分别创建 FristPage.dart, SecondPage.dart, ThreePage.dart, FourPage.dart四个子页面，并将页面路径引入tabs.dart文件中

4.基本架构已经完成

5.下一篇讲Banner轮播图的实现