首先我们先通过创建简单微信项目
创建rootPage
首先rootPage是一个tabbar，所以我们先创建一个rootPage类，里面页面是一个tabbar
main.dart中的代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'FlutterDemo',
home: RootPage(),
theme: ThemeData(
highlightColor: Color.fromARGB(1, 0, 0, 0),
splashColor: Color.fromARGB(1, 0, 0, 0),//去掉水波纹
primarySwatch: Colors.blue,
),
);
}
}
root_page.dart的代码
import 'package:flutter/material.dart';
import 'package:wachet1/pages/chat_page.dart';
import 'package:wachet1/pages/discover/discover_page.dart';
import 'package:wachet1/pages/friend_page.dart';
import 'package:wachet1/pages/mine_page.dart';
class RootPage extends StatefulWidget {
@override
_RootPageState createState() => _RootPageState();
}
class _RootPageState extends State<RootPage> {
int _currentIndex = 0;
List<Widget> _pages = [Chat_page(),FriendPage(),DiscoverPage(),MinePage()];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: (index){//点击事件
print(index);
setState(() {//调用setState方法可以重新执行build方法
_currentIndex = index;
});
},
selectedFontSize: 12.0,//选中字体的大小
currentIndex: _currentIndex,//选中的位置
fixedColor: Colors.green,//选中的颜色
type: BottomNavigationBarType.fixed,//是否一直展示在appbar上
items: [//导航栏上的
BottomNavigationBarItem(
icon: Image(
image: AssetImage('images/tabbar_chat.png'),
width: 20,
height: 20,
),
activeIcon: Image.asset(//导航栏item选中时候的图片
'images/tabbar_chat_hl.png',
width: 20,
height: 20,
),
title: Text('微信'),//导航栏item的文字
),
BottomNavigationBarItem(
icon: Image.asset(
'images/tabbar_friends.png',
width: 20,
height: 20,
),
activeIcon: Image.asset(
'images/tabbar_friends_hl.png',
width: 20,
height: 20,
),
title: Text('通讯录'),
),
BottomNavigationBarItem(
icon: Image.asset(
'images/tabbar_discover.png',
width: 20,
height: 20,
),
activeIcon: Image.asset(
'images/tabbar_discover_hl.png',
width: 20,
height: 20,
),
title: Text('发现'),
),
BottomNavigationBarItem(
icon: Image.asset(
'images/tabbar_mine.png',
width: 20,
height: 20,
),
activeIcon: Image.asset(
'images/tabbar_mine_hl.png',
width: 20,
height: 20,
),
title: Text('个人'),
),
]
),
);
}
}
知识点
MaterialApp
主界面是MaterialApp，在里面可以设置主界面home，还有主题特征theme，例如去掉点击tabbar按钮的水纹，
highlightColor: Color.fromARGB(1, 0, 0, 0),
splashColor: Color.fromARGB(1, 0, 0, 0),//去掉水波纹
Scaffold
因为页面是动态变化的，所以创建rootPage时候需要Stateful状态的页面
主界面的也用Scaffold，里面有一些属性
- body：主界面
- bottomNavigationBar：设置为在底部tabbar
- onTap：底部导航栏的点击事件，参数为一个函数，传入参数index
- selectedFontSize：选中情况的字体大小
- currentIndex：选中的位置
- fixedColor：选中的颜色
- items：//底部导航栏的按钮
- bottomNavigationBar：//按钮对象
- icon：正常的图片
- activeIcon:选中时候的照片
- title：按钮对象上的问题
- bottomNavigationBar：//按钮对象
Image
显示图片需要先把 图片拉到项目中去，假如我们把装有图片的文件夹拉入到项目的根目录中，同时需要将配置文件的pubspec.yaml中的assets值
改为
需要注意的地方就是assets前面有一个空格需要删掉跟上面uses-material-design对齐，不然图片展示不出来
然后展示图片方式有两种
- 第一种：
icon: Image(
image: AssetImage('images/tabbar_chat.png'),
width: 20,
height: 20
),
- 第二种：
activeIcon: Image.asset(//导航栏item选中时候的图片
'images/tabbar_chat_hl.png',
width: 20,
height: 20
),
二、创建discover_page
discover_page是微信的发现页面，是个固定的页面，比较简单，并且是个listView，我们先看一下代码
discover_page代码
import 'package:flutter/material.dart';
import 'package:wachet1/pages/discover/discover_cell.dart';
class DiscoverPage extends StatefulWidget {
Color _themeColor = Colors.orange;
@override
_DiscoverPageState createState() => _DiscoverPageState();
}
class _DiscoverPageState extends State<DiscoverPage> {
Color _themeColor1 = Colors.grey;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor:widget._themeColor,
//下面三个是专门为安卓使用的属性
centerTitle: true,
title: Text('发现'),//安卓切换时候显示的文字
elevation: 0.0,//没有底部边栏
),
body: Container(
color:_themeColor1,
height: 800,
child: ListView(
children: <Widget>[
DiscoverCell(
imageName: 'images/朋友圈.png',
title: '朋友圈',
subImageName: '',
subTile: '',
),
SizedBox(
height: 10
),
DiscoverCell(
imageName: 'images/扫一扫2.png',
title: '扫一扫',
),
DiscoverLineView(),
DiscoverCell(
imageName: 'images/摇一摇.png',
title: '摇一摇',
),
SizedBox(
height: 10,
),
DiscoverCell(
imageName: 'images/看一看icon.png',
title: '看一看',
),
DiscoverLineView(),
DiscoverCell(
imageName: 'images/摇一摇.png',
title: '摇一摇',
),
SizedBox(
height: 10
),
DiscoverCell(
imageName: 'images/看一看icon.png',
title: '看一看',
),
DiscoverLineView(),
DiscoverCell(
imageName: 'images/搜一搜 2.png',
title: '搜一搜',
),
SizedBox(
height: 10
),
DiscoverCell(
imageName: 'images/附近的人icon.png',
title: '附近的人',
),
SizedBox(
height: 10,
),
DiscoverCell(
imageName: 'images/购物.png',
title: '购物',
subTile: '618限时购物',
subImageName: 'images/badge.png',
),
DiscoverLineView(),
DiscoverCell(
imageName: 'images/游戏.png',
title: '游戏',
),
SizedBox(
height: 10,
),
DiscoverCell(
imageName: 'images/小程序.png',
title: '小程序',
),
],
),
),
);
}
}
class DiscoverLineView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(width: 50,height: 0.5,color: Colors.white,),
Container(height: 0.5,color: Colors.grey,)
],
);
}
}
知识点
变量的使用
我们定义的变量如果在DiscoverPage里面，那么在_DiscoverPageState里面可以用
widget.变量名
这样来访问
SizedBox
当我们有需要间距的时候可以用SizedBox组件来使用
AppBar
类似于iOS的navtgationBar导航栏，其中可以设置导航栏的背景色，title等，并且有两个针对安卓的属性：
- centerTitle：
- elevation：为0的时候不展示底部边栏
其中考虑到listView中的cell都是很类似的， 我们把cell提出来创建一个discover_cell
创建discover_cell
discover_cell代码
import 'package:flutter/material.dart';
import 'package:wachet1/pages/discover/discover_child_page.dart';
class DiscoverCell extends StatelessWidget {
final String title;
final String subTile;
final String imageName;
final String subImageName;
DiscoverCell({this.title,this.subTile,this.imageName,this.subImageName});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => Didcover_child_page(title: '$title',)
)
);
},
child: Container(
color: Colors.white,
height: 54,
child: Row(
//让子组件两边对齐
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
//left
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Image(
image: AssetImage(imageName),
width: 20,
),
SizedBox(
width: 15,
),
Text(title),
],
),
),
//right
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
subTile != null ? Text(subTile):Text(''),
SizedBox(
width: 10,
),
subImageName != null?
Image(
image: AssetImage(subImageName),
width: 12,
)
:Container(),
SizedBox(
width: 10,
),
Image(
image: AssetImage('images/icon_right.png'),
width: 15,
),
],
),
),
],
),
),
);
}
}
知识点
重写构造方法
因为cell上有4个空间，所以我们对cell定义了4个变量，并且重写cell的构造方法，
DiscoverCell({this.title,this.subTile,this.imageName,this.subImageName});
给cell加点击事件
cell需要点击，所以我们在创建cell时候外面包上一层GestureDetector，手势控件，可以定义点击事件ontap等
Navigator
通过导航栏Navigator我们可以推出子页面，在推出时候需要定义路由MaterialPageRoute，在这里面创建子页面
状态
stateFull：其实UI也不会变，需要有一个能管理状态管理器， 管理器继承State<管理的类> 在这里实现build方法
在展示类实现createState方法
会出现两个类
floatingActionButton：悬浮按钮
onPressed:点击方法
Stateless：是不刷新UI
shift+F6，修改类
点击有水波纹在MaterialApp里面的效果
选中变大是bottomNavationBar的效果
安卓图片不能用大写字母
widget可以访问主类变量
centerTitle为了安卓使用的属性
