Flutter基础
# 前言
原本仅仅希望加一个Flutter
错误来学习完Flutter
,太年轻了,这玩意的组建也是不少,基本上可以类似当初学Vue3
的时候。
# 如何使用Android Studio
创建新项目
打开
Android Studio
,点击File > New > New Project
。在弹出的新建工程窗口中,选择
Empty Activity
,点击Next
。输入
Name
、Package name
(如有;否则可以使用默认值)、Save location
。在此处Name
以mPaaS mini program
为例。选择Minimum SDK
为API 21: Android 5.0
(Lollipop
)。点击 Finish,即可完成 创建工程。
# 组建
在构成
App
中MaterialApp
组建和Scaffold
组建是必须的 在写App
的时候建议使用MaterialApp
为根组建进行包裹,然后在上一层使用Scaffold
组建来进行元素的呈现
# MaterialApp
# 基础解释
是一个方便的Widget
,它封装了应用程序实现Material Design
所需要的一些Widget
。一般作为顶层Widget
使用
# 常用属性
Home
(主页)Title
(标题)Color
(颜色)Theme
(主题)Routes
(路由) ...
# Scaffold
Scaffold
是Material Design
布局结构的基本实现。此类提供了用于显示drawer
、snackbar
和底部sheet
的API
# 主要属性
appBar
(显示在界面顶部的一个AppBar
)body
(当前界面所显示的主要内容Widget
)drawer
(抽屉菜单控件) ...
# 常用
# 把内容单独抽离成一个组件
在
Flutter
中自定义的组建其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget
StatelessWidget
是无状态组建,状态不可变的widget
StatefulWidget
是有状态组建,支持的状态可能在widget
生命周期中改变
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
// 此处返回一个构建的界面模板即可
return Center(
child: Container(
alignment: Alignment.center,
height: 200,
width: 200,
decoration: const BoxDecoration(
color: Colors.yellow,
),
child: const Text(
"你好Flutter",
style:TextStyle(
fontSize: 20
) ,
),
),
);
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Container
容器组件
名称 | 功能 |
---|---|
alignment | topCenter :顶部居中对齐;topLeft :顶部左对齐;topRight :顶部右对齐;center :水平垂直居中对齐;centerLeft :垂直居中水平居左对齐;centerRight :垂直居中水平居右对齐;bottomCenter :底部居中对齐;bottomLeft :底部居左对齐;bottomRight :底部居右对齐 |
decoration | decoration: BoxDecoration( color: Colors.blue, border: Border.all( color:Colors.red, width: 2.0), orderRadius:BorderRadius.circular((8)) ,// 圆角 ,boxShadow: [ BoxShadow( color: Colors.blue, offset: Offset(2.0, 2.0),blurRadius: 10.0, ) ], ) //LinearGradient 背景线性渐变 RadialGradient 径向渐变 gradient: LinearGradient( colors: [Colors.red, Colors.orange], ) , |
margin | margin 属性是表示Container 与外部其他组件的距离。 EdgeInsets.all(20.0) , |
padding | padding 就是Container 的内边距,指Container 边缘与Child 之间的距离padding:EdgeInsets.all(10.0) |
transform | 让Container 容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2) |
height | 容器高度 |
width | 容器宽度 |
child | 容器子元素 |
# Text
组件
名称 | 功能 |
---|---|
textAlign | 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) |
textDirection | 文本方向(ltr 从左至右,rtl 从右至左) |
overflow | 文字超出屏幕之后的处理方式(clip 裁剪,fade 渐隐,ellipsis 省略号) |
textScaleFactor | 字体显示倍率 |
maxLines | 文字显示最大行数 |
style | 字体的样式设置 |
# TextStyle
的参数
名称 | 功能 |
---|---|
decoration | 文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线) |
decorationColor | 文字装饰线颜色 |
decorationStyle | 文字装饰线风格([dashed,dotted] 虚线,double 两根线,solid 一根实线,wavy 波浪线) |
wordSpacing | 单词间隙(如果是负值,会让单词变得更紧凑 |
letterSpacing | 字母间隙(如果是负值,会让字母变得更紧凑) |
fontStyle | 文字样式(italic 斜体,normal 正常体) |
fontSize | 文字大小 |
color | 文字颜色 |
fontWeight | 字体粗细(bold 粗体,normal 正常体) |
# 图片组件
Image.asset
本地图片Image.network
远程图片
Image
组件的常用属性
名称 | 类型 | 说明 |
---|---|---|
alignment | Alignment | 图片的对齐方式 |
color 和 colorBlendMode | 设置图片的背景颜色,通常和colorBlendMode 配合一起使用,这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合 | |
fit | BoxFit | fit属性用来控制图片的拉伸和挤压,这都是根据父容器来的。BoxFit.fill :全图显示,图片会被拉伸,并充满父容器。BoxFit.contain :全图显示,显示原比例,可能会有空隙。BoxFit.cover :显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。 BoxFit.fitWidth :宽度充满(横向充满),显示可能拉伸,可能裁切。 BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。BoxFit.scaleDown :效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。 |
repeat | 平铺 | ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。ImageRepeat.repeatX : 横向重复,纵向不重复。ImageRepeat.repeatY :纵向重复,横向不重复。 |
width | 宽度 一般结合 ClipOval 才能看到效果 | |
height | 高度 一般结合 ClipOval 才能看到效果 |
更多属性参考:https://api.flutter.dev/flutter/widgets/Image-class.html (opens new window)
# 图标组件
# Flutter
官方 Icons
组件
Material Design
所有图标可以在其官网查看:https://material.io/tools/icons/ (opens new window)
基础调用示例
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Center(
child: Column(
children: const [
Icon(Icons.search,color: Colors.red,size: 40),
SizedBox(height: 10),
Icon(Icons.home),
SizedBox(height: 10),
Icon(Icons.category),
SizedBox(height: 10),
Icon(Icons.shop),
SizedBox(height: 10),
],
)
);
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 使用阿里巴巴图标库自定义字体图标
导入字体图标文件;这一步和导入字体文件相同,假设我们的字体图标文件保存在项目根目录下, 路径为
"fonts/iconfont.ttf"
:fonts: - family: myIcon #指定一个字体名 fonts: - asset: fonts/iconfont.ttf
1
2
3
4fonts: - family: myIcon #指定一个字体名 fonts: - asset: fonts/iconfont.ttf - family: alipayIcon #指定一个字体名 fonts: - asset: fonts/iconfont2.ttf
1
2
3
4
5
6
7// Make sure to add code blocks to your code group
为了使用方便,我们定义一个
MyIcons
类,功能和Icons
类一样:将字体文件中的所有图标都定义成静态变量:class MyIcons{ // book 图标 static const IconData book = IconData( 0xe614, fontFamily: 'myIcon', matchTextDirection: true ); // 微信图标 static const IconData wechat = IconData( 0xec7d, fontFamily: 'myIcon', matchTextDirection: true ); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14使用
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(MyIcons.book,color: Colors.purple), Icon(MyIcons.wechat,color: Colors.green), ], )
1
2
3
4
5
6
7
# Flutter
列表组件
Flutter
中我们可以通过 ListView
来定义列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下分类:
- 垂直列表
- 垂直图文列表
- 水平列表
- 动态列表
# 常用列表组件
名称 | 类型 | 说明 |
---|---|---|
scrollDirection | Axis | Axis.horizontal 水平列表 Axis.vertical 垂直列表 |
padding | EdgeInsetsGeometry | 内边距 |
resolve | bool | 组件反向排序 |
children | List | 列表元素 |
在
Flutter
中ListView
下加入Container
如果是个垂直列表的话宽度实际上是自适应的
# Flutter
网格布局
GridView
网格布局在实际项目中用的也是非常多的,当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件 GridView
实现布局。
GridView
创建网格列表主要有下面三种方式:
- 可以通过
GridView.count
实现网格布局 - 可以通过
GridView.extent
实现网格布局 - 通过
GridView.builder
实现动态网格布局
# 常用属性
名称 | 类型 | 说明 |
---|---|---|
scrollDirection | Axis | 滚动方法 |
padding | EdgeInsetsGeometry | 内边距 |
resolve | bool | 组件反向排序 |
crossAxisSpacing | double | 水平子 Widget 之间间距 |
mainAxisSpacing | double | 垂直子 Widget 之间间距 |
crossAxisCount | int 用在 GridView.count | 一行的 Widget 数量 |
maxCrossAxisExtent | double 用在 GridView.extent | 横轴子元素的最大长度 |
childAspectRatio | double | 子Widget 宽高比例 |
children | [ ] | |
gridDelegate | SliverGridDelegateWithFixedCrossAxisCount SliverGridDelegateWithMaxCrossAxisExtent | 控制布局主要用在 GridView.builder 里面 |
# 线性布局 Row
和 Column
# Row
水平布局组件
名称 | 说明 |
---|---|
mainAxisAlignment | 主轴的排序方式 |
crossAxisAlignment | 次轴的排序方式 |
children | 组件子元素 |
# Column
垂直布局组件
名称 | 说明 |
---|---|
mainAxisAlignment | 主轴的排序方式 |
crossAxisAlignment | 次轴的排序方式 |
chilren | 组件子元素 |
# double.infinity
和 double.maxFinite
double.infinity
和 double.maxFinite
可以让当前元素的 width
或者 height
达到父元素的尺寸