一个基础的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<Tabs> {
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轮播图的实现
