- 一. Widget
- 1.1. 万物皆是Widget
- 1.2. Material设计风格
- 二. 实例一 hello flutter
- 2.1. text
- 2.2. 居中
- 2.3. 添加导航栏
- 2.4. 改进
- 三. 案例二 同意协议
- 3.1. 错误代码
- 3.2. 正确代码
- Flutter整个应用程序中所看到的内容几乎都是Widget,甚至内边距的设置也是Widget;
- Flutter中的Widget(小部件或者组件),相当于iOS、Android中的控件,相当于Vue、React中的组件;但Fullter中Widget更彻底。
- material是Google公司推行的一套设计风格,或者叫设计语言、设计规范等;
- 里面有非常多的设计规范,比如颜色、文字的排版、响应动画与过度、填充等等;
- 在Flutter中高度集成了Material风格的Widget;
import 'package:flutter/material.dart';
void main() {
// runApp(const MyApp());
runApp(Text('hello flutter', textDirection: TextDirection.ltr));
}
2.2. 居中
void main() {
// runApp(const MyApp());
runApp(
Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 30),
)
)
);
}
2.3. 添加导航栏
void main() {
// runApp(const MyApp());
runApp(
MaterialApp(//material 风格
home: Scaffold(//脚手架
appBar: AppBar(//导航栏
title: Text("第一个应用程序"),
),
body: Center(//主视图
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 30),
)
),
)
)
);
}
2.4. 改进
- widget:
- 无状态的Widget: StatelessWidget
- 有状态的Widget: StatefulWidget
- StatefulWidget就是有状态的Widget。它在程序运行时,状态被允许发生改变,要想编写出能够被用户 *** 作的App,就必须要使用StatefulWidget。
void main() {
// runApp(const MyApp());
runApp(
MyApp()
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(//material 风格
home: HomePage()
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(//脚手架
appBar: AppBar(//导航栏
title: Text("第一个应用程序!"),
),
body: HHContentBody(),
);
}
}
class HHContentBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(//主视图
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 30),
)
);
}
}
三. 案例二 同意协议
- 所有的Widget被注解@immutable修饰,所有成员变量不可变
//所有的Widget被注解@immutable修饰,内部不可含有可变属性
class HHContentBody extends StatelessWidget {
var flag = true;//错误写法
@override
Widget build(BuildContext context) {
return Center(//主视图
child: Row(//行
mainAxisAlignment: MainAxisAlignment.center,//居中
children: [
Checkbox(value: flag, onChanged: (flag){
ValueKey(flag);
}),
Text('同意协议'),
],
)
);
}
}
3.2. 正确代码
void main() {
// runApp(const MyApp());
runApp(
MyApp()
);
}
/**
* widget:
* 有状态的Widget: StatefulWidget
* 无状态的Widget: StatelessWidget
*/
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(//material 风格
home: HomePage()
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(//脚手架
appBar: AppBar(//导航栏
title: Text("第一个应用程序!"),
),
body: HHContentBody(),
);
}
}
class HHContentBody extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return HHContentBodyState();
}
}
//flag: 状态
class HHContentBodyState extends State<HHContentBody> {
var flag = true;
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(value: flag, onChanged: (value){
// flag = value!;
print(flag);
setState(() {
flag = value!;
});
}),
Text('同意协议')
],
),
);
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)