AppBar

  • AppBar组件主要用于定义应用程序顶部区域,可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。
  • AppBar是顶部导航栏,有以下常用的可选属性;更多属性可以Ctrl点击查看构造方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
AppBar({
Key key,
this.leading, //widget类型,即可任意设计样式,表示左侧leading区域,通常为icon,如返回icon
this.automaticallyImplyLeading = true, // 如果leading!=null,该属性不生效;如果leading==null且为true,左侧leading区域留白;如果leading==null且为false,左侧leading区域扩展给title区域使用
this.title,//widget类型,即可任意设计样式,表示中间title区域,通常为标题栏
this.actions,// List<Widget>类型,即可任意设计样式,表示右侧actions区域,可放置多个widget,通常为icon,如搜索icon、菜单icon
this.flexibleSpace,
this.bottom, //PreferredSizeWidget类型,appbar底部区域,通常为Tab控件
this.elevation, //阴影高度,默认为4
this.shape,//ShapeBorder 类型,表示描边形状
this.backgroundColor, //Color类型,背景色
this.brightness,//Brightness类型,表示当前appbar主题是亮或暗色调,有dark和light两个值,可影响系统状态栏的图标颜色
this.iconTheme, //IconThemeData类型,可影响包括leading、title、actions中icon的颜色、透明度,及leading中的icon大小。
this.actionsIconTheme,
this.textTheme,// TextTheme类型,文本主题样式,可设置appbar中文本的许多样式,如字体大小、颜色、前景色、背景色等...
this.primary = true,//true时,appBar会以系统状态栏高度为间距显示在下方;false时,会和状态栏重叠,相当于全屏显示。
this.centerTitle, // boolean 类型,表示标题是否居中显示
this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title区域水平方向与leading和actions的间距(padding)
this.toolbarOpacity = 1.0,//toolbar区域透明度
this.bottomOpacity = 1.0,//bottom区域透明度
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
// 去掉右上角debug
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
// 左侧图标或者按钮
leading: IconButton(
icon: Icon(Icons.home),
onPressed: (){},
),
// 右侧按钮
actions: [
IconButton(icon: Icon(Icons.search),onPressed:(){}),
IconButton(icon: Icon(Icons.settings),onPressed:(){}),
],
title: Text('Flutter'),
elevation: 20.0, // 阴影
),
)
);
}
}

TabBar

  • TabBar的使用需要结合AppBar,首先需要熟悉他的定义属性,现在查看常用定义属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const TabBar({
Key key,
@required this.tabs,//必须实现的,设置需要展示的tabs,最少需要两个
this.controller,
this.isScrollable = false,//是否需要滚动,true为需要
this.indicatorColor,//选中下划线的颜色
this.indicatorWeight = 2.0,//选中下划线的高度,值越大高度越高,默认为2
this.indicatorPadding = EdgeInsets.zero,
this.indicator,//用于设定选中状态下的展示样式
this.indicatorSize,//选中下划线的长度,label时跟文字内容长度一样,tab时跟一个Tab的长度一样
this.labelColor,//设置选中时的字体颜色,tabs里面的字体样式优先级最高
this.labelStyle,//设置选中时的字体样式,tabs里面的字体样式优先级最高
this.labelPadding,
this.unselectedLabelColor,//设置未选中时的字体颜色,tabs里面的字体样式优先级最高
this.unselectedLabelStyle,//设置未选中时的字体样式,tabs里面的字体样式优先级最高
this.dragStartBehavior = DragStartBehavior.start,
this.onTap,//点击事件
})
  • 实现不同的切换,显示索引
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage()
);
}
}

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
List tabs = ["Flutter","Android","IOS"];
late TabController _tabController;
int _index = 0;

@override
void initState() {
super.initState();
_tabController = new TabController(
initialIndex: _index, // 初始状态
vsync: this, //动画效果的异步处理,默认格式,背下来即可
length: tabs.length //需要控制的Tab页数量
);
// tabs改变时就会触发
_tabController.addListener(() {
// 状态修改一定要在setState
setState(() {
_index = _tabController.index;
});
});
}
//当整个页面dispose时,记得把控制器也dispose掉,释放内存
@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.home),
onPressed: (){},
),
actions: [
IconButton(icon: Icon(Icons.search),onPressed:(){}),
IconButton(icon: Icon(Icons.settings),onPressed:(){}),
],
title: Text('Flutter'),
elevation: 20.0,
bottom: TabBar(
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList(),
),
),
body: Text(_index.toString()),
);
}
}

TabBarView

  • 我们在点击一个选项要显示页面,并且具有左右滑动效果,就需要TabBarView;首先定义三个视图组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class FlutterView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Flutter"),
);
}
}
class AndroidView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Android"),
);
}
}

class IosView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Ios"),
);
}
}
  • 然后组成一个组件集合,TabBarView中的controller必须和TabBar的·一致,这样每一次都显示组件内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage()
);
}
}

class HomePage extends StatefulWidget {
// 定义组件集合
List<Widget> widgets = [FlutterView(),AndroidView(),IosView()];
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
List tabs = ["Flutter","Android","IOS"];
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this, //动画效果的异步处理,默认格式,背下来即可
length: tabs.length //需要控制的Tab页数量
);

}
//当整个页面dispose时,记得把控制器也dispose掉,释放内存
@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.home),
onPressed: (){},
),
actions: [
IconButton(icon: Icon(Icons.search),onPressed:(){}),
IconButton(icon: Icon(Icons.settings),onPressed:(){}),
],
title: Text('Flutter'),
elevation: 20.0,
bottom: TabBar(
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList(),
),
),
body: TabBarView(
children: widget.widgets,
controller: _tabController,
)
);
}
}

Drawer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage()
);
}
}
class HomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter")),
drawer: MyDrawer(),
);
}
}

class MyDrawer extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
// 调整位置
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top:40),
child: Text("data")
)
],
)
),
);
}
}

BottomNavigationBar

  • BottomNavigationBar定义底部导航栏,还是切换三个视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class FlutterView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Flutter"),
);
}
}
class AndroidView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Android"),
);
}
}

class IosView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("Ios"),
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage());
}
}

class HomePage extends StatefulWidget {
// 定义组件集合
List<Widget> widgets = [FlutterView(),AndroidView(),IosView()];

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _index = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter")),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.flutter_dash_sharp),
label: "Flutter",
),
BottomNavigationBarItem(
icon: Icon(Icons.android_sharp),
label: "Android",
),
BottomNavigationBarItem(
icon: Icon(Icons.ios_share_outlined),
label: "IOS",
),
],
currentIndex: _index,
onTap:(v){
setState(() {
_index = v;
});
}
),
body: widget.widgets[_index]
);
}
}

BottomAppBar

  • BottomAppBar可以实现一些自定义的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage());
}
}

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _index = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter")),
bottomNavigationBar: BottomAppBar(
color: Theme.of(context).primaryColor, // 使用系统主题色
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(icon: Icon(Icons.add),onPressed:(){}),
SizedBox(),
IconButton(icon: Icon(Icons.home),onPressed:(){}),
],
)
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.widgets_rounded),
onPressed:(){}
),
);
}
}

AlertDialog

  • 弹窗也是一个页面,可以使用路由的传参和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage());
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
List list = new List.filled(3, null, growable: false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter")),
body: Column(children: [
RaisedButton(onPressed: _showAlert, child: Text("对话框"))
]));
}

void _showAlert() async {
// 接收参数 异步等待
var result = await showDialog(
context: context,
builder: (BuildContext context) {
// AlertDialog为简单弹窗
// CupertinoAlertDialog为IOS风格弹窗
return CupertinoAlertDialog(
title: Text("标题"),
content: Text("确认删除吗?"),
actions: [
FlatButton(onPressed: () {
// false传参数
Navigator.of(context).pop(false);
}, child: Text("取消")),
FlatButton(onPressed: () {
Navigator.pop(context,true);
}, child: Text("确认"))
],
);
});
// 输出结果
print(result);
}
}

Card

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.yellow),
debugShowCheckedModeBanner: false,
home: HomePage());
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter")),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: [
Card(
child: Container(
width: double.infinity,
height: 200,
),
)
],
)
)
);
}
}