1.Flutter项目类型介绍
-
Plugin指的是插件，带有安卓/iOS代码原生代码
-
Module一般用于混合开发
-
Package指的是三方框架（全是Dart代码 ）。类似于iOS中的Alamofire、Kingfisher
-
App,创建app
2.Flutter的特点
- 不依赖原生UI
- 界面更新逻辑和原生不一样（增量渲染）
- 为什么
Flutter中大量final修饰的属性，const修饰的构造方法（常量对象）
- 因为
Flutter的渲染逻辑，是增量渲染。Widget结构是树状结构
- 想改变屏幕内容就直接改变
Widget对象
- 常量对象的创建效率更高！
3.万物皆Widget
-
Flutter中万物皆是Widget
- 自定义 一个
Widget要能够被渲染，需要实现build方法！
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return const Center(
child: Text(
'helloFlutter',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40,//px
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
);
}
}
-
Flutter的Widget分两类
- 有状态：
StatefulWidget
- 无状态：
StatelessWidget
class MyStateFulWidget extends StatefulWidget {
const MyStateFulWidget({Key? key}) : super(key: key);
@override
_MyStateFulWidgetState createState() => _MyStateFulWidgetState();
}
class _MyStateFulWidgetState extends State<MyStateFulWidget> {
@override
Widget build(BuildContext context) {
return Container();
}
}
4. MaterialApp
-
home属性（主页面）
- 需要一个
Widget
-
Scaffold小部件
- 带有导航栏
appBar的小部件
- 导航栏可以设置文字、颜色。而且可以自定义
Widget
-
body属性
-
debugShowCheckedModeBanner
- 是否显示Debug标记（便于我们在调试版本中做操作）
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter')),
body: Text('Hello Flutter'),
),
debugShowCheckedModeBanner: false,
);
}
}
5. 初探ListView
- 类似iOS中的
TableView
-
ListView.builder(itemCount,itemBuilder)
- 参数：
itemCount
- 参数：
itemBuilder
- 是一个回调函数。
function(BuildContext context,int index)
- 返回每一个item。类似iOS中
TableView的cellForRow
-
context参数，暂时还用不到。后续用到时再探究补充
-
indext参数，目前要返回的cell的index。说白了，就是现在给我返回的第几个item
- 参数：
padding
- 当Scaffold不显示AppBar时，ListView会带一个上边距，此时设置padding即可解决
padding: EdgeInsets.only(top: 0)- 注意：使用
MediaQuery.removePadding(context: context, child: ListView(...), removeTop: true)也可以解决上边距问题
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter')),
body: ListViewTestWidget(),
),
debugShowCheckedModeBanner: false,
));
}
class ListViewTestWidget extends StatelessWidget {
Widget _itemBuilder(BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.red,
child: Column(
children: [
Image.network(datas[index].imageUrl!), //加载网络图片
SizedBox(height: 10,), //间距10
Text(
datas[index].name!,
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: _itemBuilder,
itemCount: datas.length,
);
}
}
class Car {
final String? name;
final String? imageUrl;
const Car({this.name,this.imageUrl});
}
List<Car> datas = [
const Car(
name: '保时捷918 Spyder',
imageUrl:
'https://img.haomeiwen.com/i2990730/7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
),
const Car(
name: '兰博基尼Aventador',
imageUrl:
'https://img.haomeiwen.com/i2990730/e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
)
];
ListView.png
6. 其它一些常用Widget介绍
1.Container
- 类似iOS的
UIView。一个空的小部件。很常用
-
margin， 内边距。让我内部的小部件往里面缩
- 每一个视图
Widget都可以看成一个矩形
-
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter')),
body: Container(
child: Text('Hello Flutter'),
// alignment: Alignment(0, 0), x,y值区间为-1~1。0，0在屏幕最中间
// height: 100, //设置高度
// width: 100, //设置宽度
// color: Colors.white, //设置颜色
// margin: EdgeInsets.all(10), //设置外间距
// padding: EdgeInsets.all(10), //设置内间距
),
),
debugShowCheckedModeBanner: false,
));
}
2. Image
- 获取网络图片， 异步获取。
Image.network(urlStr)
- 获取本地资源图片。
- 1.先将图片文件拖入工程内
- 2.配置
pubspec.yaml中的asserts。例如图片文件夹名称为images，格式如下：
assets:
- images/
- 3.使用图片文件名访问。
Image.assert(xx.png)/Image(image: AssetImage(xx.png))
//加载网络图片
Image.network(图片地址)
//加载本地图片
Image.asset('xx.png')
Image(image: AssetImage('xx.png'))
3.添加间距/占位
//添加横向10占位
Container(width: 10)
SizedBox(width: 10)
4.RichText
- 创建富文本使用
RichText，添加textSpan小部件。textSpan相当于某一段带样式的文字
-
textSpan里的childrens，可以继续添加textSpan，实现富文本
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter')),
body: RichTextDemo(),
),
debugShowCheckedModeBanner: false,
));
}
class RichTextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RichText(
maxLines: 3, //最多展示3行
overflow: TextOverflow.ellipsis, //文本截断模式，以省略号
text: TextSpan(
text: '我',
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.red
),
children: [
TextSpan(
text: '正在读',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.purple
)
),
TextSpan(
text: '《Flutter进阶》',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black
)
)]
),
);
}
}
RichText.png
4.图片切圆角
- 使用
Container中的decoration实现切圆角功能
-
borderRadius设置圆角大小
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage('images/image.png'),
fit: BoxFit.cover
),
)
);
}
- fit为图片显示模式
-
fill，通过拉伸(改变原图比例)来铺满组件
BoxFit.fill.png
-
contain，将会尽可能的伸展来达到组件的边缘
BoxFit.contain.png
-
cover，将会尽可能小的放大来铺满整个组件
BoxFit.cover.png
-
fitWidth，保持原图比例，拉升宽度来达到组件的宽度
BotFit.fitWidth.png
-
fitHeight，保持原图比例，拉升高度来达到组件的高度
BoxFit.fitHeight.png
-
none，正常展示，默认居中
BoxFit.none.png
-
scaleDown，保持在组件中并且不改变比例
BoxFit.scaleDown.png
网友评论