本篇会用小示例的方式,更全面的使用flutter,进一步的强化如何在项目中开发。
一,列表显示
加载一个列表如下效果
1,准备数据
在项目lib下创建一个person.dart实例用于存放数据
class Person{
const Person({
this.name,
this.address,
this.imageUrl,
});
final String name;
final String address;
final String imageUrl;
}
final List<Person> persons=[
Person(
name: "小明",
address: "北京市第五中学",
imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
),
Person(
name: "小红",
address: "北京市第五中学",
imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
),
Person(
name: "小张",
address: "北京市第五中学",
imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
),
];
2,创建列表Widget
导入实例person.dart
import 'package:flutter/material.dart';
import 'person.dart';
class PersonWidget extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.network(
persons[index].imageUrl,
width: 100.0,
height: 100.0,
),
SizedBox(height: 16.0,),
Text(persons[index].name,
style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
SizedBox(height: 16.0,),
Text(persons[index].address,
style: TextStyle(
fontSize: 16.0,
color: Colors.black
),)
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: persons.length,
itemBuilder: _listItemBuilder,
);
}
}
3,导入自己的PersonWidget组件
import 'package:flutter/material.dart';
import 'PersonWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text("flutter"),
elevation: 30.0,
),
body: PersonWidget(),//引用列表Widget
),
theme: new ThemeData(primarySwatch: Colors.yellow),
);
}
}
二,导航栏和Tab选项卡
实现一个支持手势滑动的Tab选项卡功能
第一步,先指定主题样式
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: TabDemo(),//这里是要引入的导航栏和选项卡代码
theme: new ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70),
);
}
}
theme是应用主题样式,有关更多样式可以查看 Theme
第二步,编写导航栏和选项卡代码
class TabDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'menu',
onPressed: ()=>debugPrint('点击更多'),
),
title: Text('导航栏'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: "search",
onPressed: () => debugPrint('点击搜索'),
)
],
elevation: 5.0,
bottom: TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.account_box)),
Tab(icon: Icon(Icons.account_circle)),
Tab(icon: Icon(Icons.access_time)),
],
),
),
body: TabBarView(
children: <Widget>[
Text('第一个',style:TextStyle(fontSize: 40.0)),
Text('第二个',style:TextStyle(fontSize: 40.0)),
Text('第三个',style:TextStyle(fontSize: 40.0)),
]),
//侧滑抽屉部分 下边介绍
drawer: DrawerDemo(),
//底部导航栏 下边介绍
bottomNavigationBar: BottomBarDemo()),
),
);
}
}
DefaultTabController,默认的选项卡。 length就是选项卡的数量,这里指定的是3。Scaffold是纸墨设计布局结构,有关介绍可以看Scaffold。Scaffold中使用了appBar,appBar就是导航栏和Android中的ActionBar类似,更多介绍可以查看AppBar。在bottom中使用了TabBar,TabBar就是选项卡,这里指定了三个图标,如上图所示。接着看body中的TabBarView,这是TabBar的内容,在这指定了三个文本,更多介绍可以查看TabBar。
三,侧滑抽屉内容
侧滑抽屉效果图,支持侧滑和点击menu图标。
代码实现部分
class DrawerDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('我是传奇'),
accountEmail: Text('1135320759@qq.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('https://avatars2.githubusercontent.com/u/20411648?s=460&v=4'),
),
),
ListTile(
title: Text('内容',textAlign: TextAlign.right,),
trailing: Icon(Icons.access_time),
onTap: ()=>Navigator.pop(context),
)
],
),
);
}
}
上文中用到了drawer,DrawerDemo就是drawer实现的内容。
drawer: DrawerDemo(),//侧滑抽屉部分
DrawerDemo中使用了ListView,其中包含UserAccountsDrawerHeader和ListTile。ListTile中添加了一个文本和一个图标,而且指定了点击事件,点击后让drawer消失。如果想通过点击menu显示drawer,可以把menu按钮去掉,因为默认实现了这种效果,只要有drawer就会有menu按钮。