提纲
1.MaterialApp
2.scaffold
3.AppBar
4.TabBar
4.BottomNavigationBar
5.Drawer
6.FloatingActionButton
7.FlatButton
8.PopupMenuButton
9.SimpleDialog
10.AlertDialog
11.SnackBar
12.TextField
13.Card
一、 MaterialApp(应用组件)
MaterialApp代表使用质感设置风格的应用,一个完整的Flutter项目就是从MaterialApp开始的。
属性名称 | 说明 | 类型 |
---|---|---|
home | 主页 | Widget |
routes | 路由 | Map<String, WidgetBuilder> |
initialRoute | 初始路由 | String |
onGenerateRoute | 生成路由 | RouteFactory |
onUnknownRoute | 未知路由 | RouteFactory |
navigatorObservers | 导航观察器 | List |
builder | 建造者 | TransitionBuilder |
title | 标题 | String |
onGenerateTitle | 生成标题 | GenerateAppTitle |
color | 颜色 | Color |
theme | 主题 | ThemeData |
locale | 地点 | Locale |
localizationsDelegates | 本地化委托 | Iterable<LocalizationsDelegate> |
localeResolutionCallback | 区域分辨回调 | LocaleResolutionCallback |
supportedLocales | 支持区域 | Iterable |
debugShowMaterialGrid | 调试显示材质网格 | bool |
showPerformanceOverlay | 显示性能叠加 | bool |
checkerboardRasterCacheImages | 棋盘格光栅缓存图像 | bool |
checkerboardOffscreenLayers | 棋盘格层 | bool |
showSemanticsDebugger | 显示语义调试器 | bool |
debugShowCheckedModeBanner | 调试显示检查模式横幅 | bool |
navigatorKey | 导航键 | GlobalKey |
二、 scaffold(脚手架组件) [ˈskæfəʊld]
属性名称 | 说明 | 类型 |
---|---|---|
appBar | AppBar | 显示在界面顶部的一个 AppBar |
body | Widget | 当前界面所显示的主要内容 |
floatingActionButton | Widget | 在 Material 中定义的一个功能按钮 |
persistentFooterButtons | List<Widget> | 固定在下方显示的按钮 |
drawer | Widget | 侧边栏控件 |
bottomNavigationBar | Widget | 显示在底部的导航栏按钮栏。可以查看文档:Flutter学习之制作底部菜单导航 |
backgroundColor | Color | 背景颜色 |
resizeToAvoidBottomPadding | bool | 控制界面内容 body是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true |
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('首页'),
),
drawer: Drawer(
child: DrawaerScreen(),
elevation: 2.0,
),
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
...
),
);
}
三、AppBar(应用按钮组件)
AppBar是一个顶端栏,对应着 Android 的 Toolbar。
image.png
属性名称 | 类型 | 说明 |
---|---|---|
leading | Widget | 在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。 |
title | Widget | Toolbar 中主要内容,通常显示为当前界面的标题文字。 |
actions | List | 一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单。 |
bottom | PreferredSizeWidget | 一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。 |
elevation | double | 控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值。 |
flexibleSpace | Widget | 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。 |
backgroundColor | Color | Appbar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。 |
brightness | Brightness | Appbar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness。 |
iconTheme | IconThemeData | Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。 |
textTheme | TextTheme | Appbar 上的文字样式。 |
centerTitle | bool | 标题是否居中显示,默认值根据不同的操作系统,显示方式不一样。 |
toolbarOpacity | double |
appBar: AppBar(
title: Text('首页'),
// leading: Icon(Icons.android),
backgroundColor: Colors.red,
centerTitle: true,
// 非隐藏的菜单
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.share),
tooltip: 'Add Alarm',
onPressed: () {}
),
// 隐藏的菜单
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(
value:"选项一的内容",
child: new Text("选项一")
),
new PopupMenuItem(
value: "选项二的内容",
child: new Text("选项二")
)
],
onSelected: (String action) {
// 点击选项的时候
switch (action) {
case 'A': break;
case 'B': break;
case 'C': break;
}
},
),
],
),
TabBar
1. 属性:
属性名称 | 说明 |
---|---|
controller | 控制器 |
isScrollable = false | 是否可以滑动 |
indicatorColor | 指示器的颜色 |
indicatorWeight | 指示器高度 |
indicatorPadding | EdgeInsets.zero, |
indicator | 自定义指示器 |
indicatorSize | |
labelColor | 选中文字颜色 |
labelStyle | |
labelPadding | 文字的内边距 |
unselectedLabelColor | 未选中文字颜色 |
unselectedLabelStyle | |
dragStartBehavior | DragStartBehavior.start, |
onTap | 点击事件 |
2. 案例:实现tab切换功能
- 定义一个tab的集合tabs,类型为Tab,可以定义文本或者图标
List<Tab> tabs = [
Tab(text: "常规", icon: Icon(Icons.favorite)),
Tab(text: "质感", icon: Icon(Icons.airline_seat_recline_normal)),
Tab(text: "动画", icon: Icon(Icons.devices )),
];
- 定义TabController,必须加with TickerProviderStateMixin,否则报错,具体原理未知
//TabController必须放置build里边,否则会报错
TabController controller = TabController(length: tabs.length, vsync: this);
3.定义一个column:
①TabBar:controller、tabs、isScrollable: true,如果为true表示可以滑动,没有沾满全部,如若为false只显示屏幕内。必要属性,其他属性自己试试即可
TabBar(
//未选中tab的颜色
unselectedLabelColor: Colors.black54,
//选中tab的颜色
labelColor: Colors.blue,
//indicator颜色
indicatorColor: Colors.blue,
//indicator高度
indicatorWeight: 2,
controller: controller,
tabs: tabs,
isScrollable: false,
),
②expand--TabBarview:controler、children,孩子放置对应的界面,类似fragment
Expanded(
child: TabBarView(
controller: controller,
children: <Widget>[
NormalScreen(),
MaterialWidgetScreen(),
AnimationScreen()
],
))
image.png
完整案例:
class KnowledgePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _KnowledgePage();
}
}
class _KnowledgePage extends State<KnowledgePage>
with TickerProviderStateMixin {
TabController _tabController;
List<Tab> tabs = [
Tab(
text: '汽车',
),
Tab(
text: '美女',
),
Tab(
text: '工作',
),
Tab(
text: '明星',
),
];
@override
Widget build(BuildContext context) {
_tabController = new TabController(length: tabs.length, vsync: this);
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 50,
color: Colors.red,
child: TabBar(
isScrollable: false,
indicatorColor: Colors.white,
tabs: tabs,
controller: _tabController,
),
),
Expanded(
child: TabBarView(
children: tabs.map((Tab tab) {
return Center(
child: Text(
tab.text,
style: TextStyle(fontSize: 50, color: Colors.red),
));
}).toList(),
controller: _tabController,
))
],
),
);
}
}
四、BottomNavigationBar
- 属性
属性名称 | 类型 | 说明 |
---|---|---|
currentIndex | int | 当前索引,用来切换按钮控制 |
fixedColor | Color | 选中按钮颜色。如果没有指定,则用系统主题色 |
iconSize | double | 图标大小 |
items | List<BottomNavigationBarItem> | 底部导航条按钮 |
onTap | ValueChaged<int> | 按下其中一个按钮的回调。需要根据返回的索引设置当前索引 |
- 案例:实现底部导航功能
前提:在脚手架scaffold架构下边的一个功能模块
组件:BottomNavigationBar、Scaffold
- 定义当前索引_curIndex,用来确定切换的哪个页面
//当前选中的索引
int _curIndex = 0;
- 定义当前页面_currentScreen
//当前页面
var _currentScreen;
- 定义Appbar标题集合,统一管理
//AppBar标题文字
final appBarTitles = ["首页", "组件", "容器", "其他"];
- 每个页面的集合
//页面集合
final List PageList = [
HomeScreen(),
WidgetScreen(),
ThirdScreen(),
FourthScreen()
];
- 底部导航条目,包含标题和图标
//底部导航条目集合
List<BottomNavigationBarItem> list = [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("组件")),
BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
];
- 初始化一个页面
@override
void initState() {
super.initState();
_currentScreen = PageList[_curIndex];
}
- 布局中写脚手架scaffold:
①Appbar:设置标题
②body:2中的当前页面:_currentScreen
③drawer:侧滑界面,自定义一个有状态的界面
④BottomNavigationBarType底部 导航:items、ontap,index,type
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'${appBarTitles[_curIndex]}',
style: TextStyle(color: Colors.white),
),
//图标主题设置
iconTheme: IconThemeData(color: Colors.white),
//设置标题是否居中
centerTitle: true,
//toolbar显示的菜单
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.add), onPressed: () {})
],
),
bottomNavigationBar: BottomNavigationBar(
items: list,
currentIndex: _curIndex,
onTap: (index) {
setState(() {
_curIndex = index;
_currentScreen = PageList[_curIndex];
});
},
type: BottomNavigationBarType.fixed,
),
body: _currentScreen,
//侧滑菜单
drawer: Drawer(
child: DrawerScreen(),
elevation: 0,
),
);
}
}
完整代码:
import 'package:flutter/material.dart';
import 'package:flutter_fly/ui/home_screen.dart';
import 'package:flutter_fly/ui/widget_screen.dart';
import 'package:flutter_fly/ui/third_screen.dart';
import 'package:flutter_fly/ui/fourth_screen.dart';
import 'package:flutter_fly/ui/drawer_screen.dart';
class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
//当前选中的索引
int _curIndex = 0;
//AppBar标题文字
final appBarTitles = ["首页", "组件", "容器", "其他"];
//当前页面
var _currentScreen;
//底部导航条目集合
List<BottomNavigationBarItem> list = [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("组件")),
BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
];
//页面集合
final List PageList = [
HomeScreen(),
WidgetScreen(),
ThirdScreen(),
FourthScreen()
];
@override
void initState() {
super.initState();
_currentScreen = PageList[_curIndex];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'${appBarTitles[_curIndex]}',
style: TextStyle(color: Colors.white),
),
//图标主题设置
iconTheme: IconThemeData(color: Colors.white),
//设置标题是否居中
centerTitle: true,
//toolbar显示的菜单
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.add), onPressed: () {})
],
),
bottomNavigationBar: BottomNavigationBar(
items: list,
currentIndex: _curIndex,
onTap: (index) {
setState(() {
_curIndex = index;
_currentScreen = PageList[_curIndex];
});
},
type: BottomNavigationBarType.fixed,
),
body: _currentScreen,
//侧滑菜单
drawer: Drawer(
child: DrawerScreen(),
elevation: 0,
),
);
}
}
五、 Drawer(抽屉组件)
Drawer类似Android中的DrawerLayoutView的功能,即抽屉菜单,可以从侧边拉出来。一般结合Listview组件实现效果,常见属性:
drawer: Drawer(
child: DrawaerScreen(),//可以放置任意Widget
elevation: 2.0,//materialDesign组件的z坐标顺序
),
设置头部效果以及列表
class DrawaerScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
//设置用户信息、头像、用户名、Email等
UserAccountsDrawerHeader(
accountName: Text("大飞"),
accountEmail: Text("dafei@163.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/images/avatar.jpg'),
),
onDetailsPressed: () {
print("点击");
},
otherAccountsPictures: <Widget>[
Container(
child: Text('其他信息'),
)
],
),
ListTile(
leading: Icon(
Icons.settings,
color: Colors.red,
),
title: Text('设置'),
),
ListTile(
leading: Icon(
Icons.person_add,
color: Colors.red,
),
title: Text('登录'),
onTap: () {
},
)
],
);
}
}
网友评论