前言
Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一
header-illustration.png
MaterialApp
创建新项目时的Material Design样式的根控件
MaterialApp(
title: 'Mike Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: TestHomePage(title: 'Flutter Demo Home Page'),
)
title 表示应用的描述，在Android中显示在应用管理器的快照，IOS则会忽略此属性
home 表示应用的根页面
theme 表示应用的整体风格,主题色，字体等
onGenerateTitle 可以根据不同的业务显示不同的应用描述信息
routes 指定所有的路由信息，用于页面切换和跳转
initialRoute 如果设置为/则加载home对应的页面，否则去到routes中进行匹配
onGenerateRoute 如果initialRoute匹配路由失败，则加载onGenerateRoute指定的组件
onUnknownRoute 如果onGenerateRoute返回null,并且home也为null，则加载此处返回的组件
showPerformanceOverlay 表示是否打开性能测试
debugShowCheckedModeBanner 表示是否显示右上角Debug标志
使用路由进行页面切换
入口文件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mike Demo',
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false,
routes: {
'/home':(BuildContext context) => HomePage(),
'/login':(BuildContext context) => LoginPage()
},
initialRoute: '/home'
);
}
}
HomePage
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(centerTitle: true, title: Text("Home")),
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Ink(
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(20)),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {
//Jump to Login page
Navigator.pushNamed(context, "/login");
},
splashColor: Colors.white,
child: Container(
width: 100,
height: 40,
alignment: Alignment.center,
child: Text(
'Go to Login',
style: TextStyle(color: Colors.white),
),
),
)),
),
);
}
}
LoginPage
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(centerTitle: true, title: Text("Login")),
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Ink(
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(20)),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {
Navigator.pop(context);
},
splashColor: Colors.white,
child: Container(
width: 100,
height: 40,
alignment: Alignment.center,
child: Text(
'Back to Home',
style: TextStyle(color: Colors.white),
),
),
)),
),
);
}
}
效果
1634978626266.gif
脚手架
Scaffold 实现了Material风格的基本布局结构
appBar 用来指定标题
body 用来指定标题以下所展示的组件
drawer 用来指定侧边栏抽屉组件
bottomNavigationBar 用来指定底部导航栏
floatingActionButton 用来指定悬浮按钮
Scaffold(
appBar: AppBar(centerTitle: true, title: Text("Home")),
drawer: Container(color: Colors.red),
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.home),label:'Text' ),
BottomNavigationBarItem(icon: Icon(Icons.home),label:'Text' )
],),
floatingActionButton: FloatingActionButton(onPressed: () {
},),
)
scaffold.png
AppBar
应用程序栏目
title 标题，默认在左上角，一般用来设置文本或者图片组件
centerTitle 标题是否居中
leading 一般用来指定返回按钮也可以自定义组件
bottom 一般用来定义TabBar
class HomePage extends StatefulWidget {
@override
State createState() {
return HomePageStates();
}
}
class HomePageStates extends State
with SingleTickerProviderStateMixin {
late TabController controller;
@override
void initState() {
super.initState();
controller = TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
isScrollable: true,
tabs: [
Text('麻将社团'),
Text('RPG社团'),
Text('LOL社团'),
Text('王者荣耀社团'),
],
controller: controller,
),
title: Text('Home'),
centerTitle: true,
leading: Container(
height: double.infinity,
alignment: Alignment.center,
child: Text('Close')),
),
drawer: Container(color: Colors.red),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Text'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Text')
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
);
}
}
AppBar.png
SnackBar
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
action: SnackBarAction(
label: "Confirm",
onPressed: () {
},
),
content: Text('网络异常，请稍后重试')));
},
snack.png
欢迎关注Mike的
Android 知识整理