上节课程的内容 都写在了一起 为了解耦 我们可以把他们单独提取出来一个类
lib 下新建demo/listview_demo.dart文件
内容如下
import 'package:flutter/material.dart';
import 'package:nihao_flutter/model/post.dart';
class ListViewDemo extends StatelessWidget{
Widget _listItemBuilder(BuildContext context,int index){
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.network(posts[index].imgeUrl),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.title,
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subhead,
),
SizedBox(height: 16.0),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:posts.length,
itemBuilder: _listItemBuilder,
);
}
}
lib 下新建demo/hello_demo.dart文件
虽然这个文件没啥用 但是一家人就得整整齐齐的
import 'package:flutter/material.dart';
class Hello extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello1111',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black87
),
),
);
}
}
test/widget_test.dart老报错 说没有MyApp
真是怕了你了 把main.dart中的app 改成MyApp 然后顺便简化主页的代码
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
void main() => runApp(MyApp ());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Home(),
theme: ThemeData(primarySwatch: Colors.yellow),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
),
body: ListViewDemo(),
);
}
}
还需要重启下studio这个bug才会消失不见
每次app运行上面都有一个debug 可以去掉的
debugShowCheckedModeBanner: false,
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(primarySwatch: Colors.yellow),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
),
body: ListViewDemo(),
);
}
}
内容和上节一样 但是更方便以后的修改和开发了
so
继续本节课内容
AppBar:工具栏上的图标按钮(IconButton)整体代码如下
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(primarySwatch: Colors.yellow),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: "Navigration",
onPressed: () => {debugPrint("Navigration Button is pressed.")},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () => {debugPrint("search Button is pressed.")})
],
),
body: ListViewDemo(),
);
}
}
控制台打印
()=>debugPrint('search Button is pressed.')
android 叫做TabLayout Flutter 叫做TabBar :用标签形式展示内容
具体代码如下
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(primarySwatch: Colors.yellow),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: "Navigration",
onPressed: () => {debugPrint("Navigration Button is pressed.")},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () => {debugPrint("search Button is pressed.")})
],
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
),
));
}
}
在设置下点击状态
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight:1.0 ,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
对tab增加水波纹效果
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70
),
);
}
}
现在具体源码如下
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: "Navigration",
onPressed: () => {debugPrint("Navigration Button is pressed.")},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () => {debugPrint("search Button is pressed.")})
],
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black45,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 1.0,
),
),
body: TabBarView(
children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
),
));
}
}
Flutter Drawer 抽屉(侧边栏)
先写一个简单的drawer 不写动作 直接从左往右即可滑动出现
drawer: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("This is Drawer")],
),
),
)
import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70
),
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigration',
onPressed: ()=>debugPrint('Navigration Button is pressed.'),
),
title: Text('app Bar'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: ()=>debugPrint('search Button is pressed.'),
),
],
// 阴影
elevation: 0.0,
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight:1.0 ,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(children: <Widget>[
Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
Icon(Icons.change_history,size: 128.0,color: Colors.black12),
Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
],),
drawer: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('This is Drawer')
],
),
),
),
);
}
}
稍微规范一点
drawer: Drawer(
child: ListView(padding: EdgeInsets.zero, children: [
DrawerHeader(
child: Text('header'.toUpperCase()),
decoration: BoxDecoration(color: Colors.grey[100])),
ListTile(
title: Text(
'Favorite',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0),
),
ListTile(
title: Text(
'Messages',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.message,color: Colors.black12,size: 22.0),
),
ListTile(
title: Text(
'Settings',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.settings,color: Colors.black12,size: 22.0),
),
]),
)));
从左到右边就是
drwer:widget
从右边到左边就是
endDrawer:widget
我们改成从右边弹出来
endDrawer: Drawer(
child: ListView(padding: EdgeInsets.zero, children: [
DrawerHeader(
child: Text('header'.toUpperCase()),
decoration: BoxDecoration(color: Colors.grey[100])),
ListTile(
title: Text(
'Favorite',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0),
),
ListTile(
title: Text(
'Messages',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.message,color: Colors.black12,size: 22.0),
),
ListTile(
title: Text(
'Settings',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.settings,color: Colors.black12,size: 22.0),
),
]),
)));
}
提取出来Drawer小控件 到lib/demo/drawer_demo.dart
美化一下 然后
import 'package:flutter/material.dart';
class DrawerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(padding: EdgeInsets.zero, children: [
UserAccountsDrawerHeader(
accountName: Text(
"Liu An",
style: TextStyle(fontWeight: FontWeight.bold),
),
accountEmail: Text("1377093782@qq.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://qlogo3.store.qq.com/qzone/1377093782/1377093782/100?1517837561"),
),
decoration: BoxDecoration(
color: Colors.yellow[400],
image: DecorationImage(
image: NetworkImage(
"https://b17.photo.store.qq.com/psb?/V12afHjz3YxmJJ/wsSH2RiAY5hw.wpvEsjHmXdBttWDcJGcbjdvPUNrPZc!/b/dBEAAAAAAAAA&bo=QAZZCEAGWQgRIBc!&rf=viewer_311"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.yellow[400], BlendMode.hardLight)))),
ListTile(
title: Text(
'Favorite',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0),
),
ListTile(
title: Text(
'Messages',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),
),
ListTile(
title: Text(
'Settings',
textAlign: TextAlign.right,
),
trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0),
),
]),
);
}
}
看到吗 图片上面的帅逼就是我。。
主页代码如下
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
import 'demo/drawer_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('app Bar'),
// 阴影
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: "Navigration",
onPressed: () => {debugPrint("Navigration Button is pressed.")},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () => {debugPrint("search Button is pressed.")})
],
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black45,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 1.0,
),
),
body: TabBarView(
children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
),
drawer: DrawerDemo()));
}
}
底部导航
demo 下新建bottom_navigation_bar_demo.dart
import 'package:flutter/material.dart';
class BottomNavigationBarDemo extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BottomNavigationBarDemoState();
}
}
class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo>{
int _currentIndex=0;
void _onTapHandler(int index){
setState((){
_currentIndex=index;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return BottomNavigationBar(
currentIndex:_currentIndex,
onTap: _onTapHandler,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text('Explore')
),
BottomNavigationBarItem(
icon: Icon(Icons.history),
title: Text('History')
),
BottomNavigationBarItem(
icon: Icon(Icons.list),
title: Text('List')
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('My')
),
],
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/bottom_navigation_bar_demo.dart';
import 'package:nihao_flutter/demo/drawer_demo.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigration',
onPressed: () => debugPrint('Navigration Button is pressed.'),
),
title: Text('app Bar'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('search Button is pressed.'),
),
],
// 阴影
elevation: 0.0,
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 1.0,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: <Widget>[
ListViewDemo(),
Icon(Icons.change_history, size: 128.0, color: Colors.black12),
Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
],
),
drawer: DrawerDemo(),
bottomNavigationBar: BottomNavigationBarDemo(),
),
);
}
}
Flutter 底部导航栏
BottomNavigationBar也完成了
这个只是展示而已并没有实际的运用到项目中
如何实际的应用可以参照官方文档