jaywcjlove
parent
68fba8a8ae
commit
0148846d7e
357
docs/flutter.md
357
docs/flutter.md
@ -56,6 +56,363 @@ C:\src>git clone https://github.com/flutter/flutter.git -b stable
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
基础组件
|
||||
---
|
||||
|
||||
### Text 样式文本
|
||||
|
||||
```dart
|
||||
Text("Hello world",
|
||||
textAlign: TextAlign.left,
|
||||
);
|
||||
|
||||
Text("Hello world! I'm Jack. "*4,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
);
|
||||
|
||||
Text("Hello world",
|
||||
textScaleFactor: 1.5,
|
||||
);
|
||||
```
|
||||
|
||||
### TextStyle 指定文本显示的样式
|
||||
|
||||
```dart
|
||||
Text("Hello world",
|
||||
style: TextStyle(
|
||||
color: Colors.blue,
|
||||
fontSize: 18.0,
|
||||
height: 1.2,
|
||||
fontFamily: "Courier",
|
||||
background: Paint()..color=Colors.yellow,
|
||||
decoration:TextDecoration.underline,
|
||||
decorationStyle: TextDecorationStyle.dashed
|
||||
),
|
||||
);
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### TextSpan 文本的一个“片段”
|
||||
|
||||
```dart
|
||||
Text.rich(TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: "Home: "
|
||||
),
|
||||
TextSpan(
|
||||
text: "https://flutter.dev",
|
||||
style: TextStyle(
|
||||
color: Colors.blue
|
||||
),
|
||||
recognizer: _tapRecognizer
|
||||
),
|
||||
]
|
||||
))
|
||||
```
|
||||
|
||||
### DefaultTextStyle 文本默认样式
|
||||
<!--rehype:wrap-class=row-span-4-->
|
||||
|
||||
```dart
|
||||
DefaultTextStyle(
|
||||
// 1.设置文本默认样式
|
||||
style: TextStyle(
|
||||
color:Colors.red,
|
||||
fontSize: 20.0,
|
||||
),
|
||||
textAlign: TextAlign.start,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text("hello world"),
|
||||
Text("I am Jack"),
|
||||
Text("I am Jack",
|
||||
style: TextStyle(
|
||||
inherit: false, //2.不继承默认样式
|
||||
color: Colors.grey
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### 字体
|
||||
<!--rehype:wrap-class=row-span-4-->
|
||||
|
||||
- 在 asset 中声明，要先在 `pubspec.yaml` 中声明它
|
||||
|
||||
```yaml
|
||||
flutter:
|
||||
fonts:
|
||||
- family: Raleway
|
||||
fonts:
|
||||
- asset: assets/fonts/Raleway-Regular.ttf
|
||||
- asset: assets/fonts/Raleway-Medium.ttf
|
||||
weight: 500
|
||||
- asset: assets/fonts/Raleway-SemiBold.ttf
|
||||
weight: 600
|
||||
- family: AbrilFatface
|
||||
fonts:
|
||||
- asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
|
||||
```
|
||||
|
||||
- 将字体文件复制到在 `pubspec.yaml` 中指定的位置
|
||||
- 使用字体
|
||||
|
||||
```dart
|
||||
// 声明文本样式
|
||||
const textStyle = const TextStyle(
|
||||
fontFamily: 'Raleway',
|
||||
);
|
||||
// 使用文本样式
|
||||
var buttonText = const Text(
|
||||
"Use the font for this text",
|
||||
style: textStyle,
|
||||
);
|
||||
```
|
||||
<!--rehype:className=style-timeline-->
|
||||
|
||||
### ElevatedButton "漂浮"按钮
|
||||
|
||||
```dart
|
||||
ElevatedButton(
|
||||
child: Text("normal"),
|
||||
onPressed: () {},
|
||||
);
|
||||
```
|
||||
|
||||
### TextButton 文本按钮
|
||||
|
||||
```dart
|
||||
TextButton(
|
||||
child: Text("normal"),
|
||||
onPressed: () {},
|
||||
)
|
||||
```
|
||||
|
||||
### OutlineButton 边框阴影且背景透明按钮
|
||||
|
||||
```dart
|
||||
OutlineButton(
|
||||
child: Text("normal"),
|
||||
onPressed: () {},
|
||||
)
|
||||
```
|
||||
|
||||
### IconButton 可点击的图标按钮
|
||||
|
||||
```dart
|
||||
IconButton(
|
||||
icon: Icon(Icons.thumb_up),
|
||||
onPressed: () {},
|
||||
)
|
||||
```
|
||||
|
||||
### 带图标的按钮
|
||||
|
||||
```dart
|
||||
ElevatedButton.icon(
|
||||
icon: Icon(Icons.send),
|
||||
label: Text("发送"),
|
||||
onPressed: _onPressed,
|
||||
),
|
||||
OutlineButton.icon(
|
||||
icon: Icon(Icons.add),
|
||||
label: Text("添加"),
|
||||
onPressed: _onPressed,
|
||||
),
|
||||
TextButton.icon(
|
||||
icon: Icon(Icons.info),
|
||||
label: Text("详情"),
|
||||
onPressed: _onPressed,
|
||||
),
|
||||
```
|
||||
|
||||
### 从 asset 中加载图片
|
||||
|
||||
- 在工程根目录下创建一个`images目录`，并将图片 `aaa.png` 拷贝到该目录。
|
||||
- 在 `pubspec.yaml` 中的 `flutter` 部分添加如下内容：
|
||||
|
||||
```yaml
|
||||
assets:
|
||||
- images/aaa.png
|
||||
```
|
||||
|
||||
注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
|
||||
|
||||
- 加载该图片
|
||||
|
||||
```dart
|
||||
Image(
|
||||
image: AssetImage("images/aaa.png"),
|
||||
width: 100.0
|
||||
);
|
||||
```
|
||||
|
||||
Image 也提供了一个快捷的构造函数 `Image.asset` 用于从 `asset` 中加载、显示图片：
|
||||
|
||||
```dart
|
||||
Image.asset("images/aaa.png",
|
||||
width: 100.0,
|
||||
)
|
||||
```
|
||||
<!--rehype:className=style-timeline-->
|
||||
|
||||
### 从网络加载图片
|
||||
|
||||
```dart
|
||||
Image(
|
||||
image: NetworkImage(
|
||||
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
|
||||
width: 100.0,
|
||||
)
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
Image 也提供了一个快捷的构造函数 `Image.network` 用于从网络加载、显示图片：
|
||||
|
||||
```dart
|
||||
Image.network(
|
||||
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
|
||||
width: 100.0,
|
||||
)
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### Image 参数
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```dart
|
||||
const Image({
|
||||
...
|
||||
this.width, // 图片的宽
|
||||
this.height, // 图片高度
|
||||
this.color, // 图片的混合色值
|
||||
this.colorBlendMode, // 混合模式
|
||||
this.fit,// 缩放模式
|
||||
// 对齐方式
|
||||
this.alignment = Alignment.center,
|
||||
// 重复方式
|
||||
this.repeat = ImageRepeat.noRepeat,
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
### Switch 单选开关
|
||||
|
||||
```dart
|
||||
Switch(
|
||||
value: true,//当前状态
|
||||
onChanged:(value){
|
||||
// 重新构建页面
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Checkbox 复选框
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```dart
|
||||
Checkbox(
|
||||
value: true,
|
||||
// 选中时的颜色
|
||||
activeColor: Colors.red,
|
||||
onChanged:(value){
|
||||
// ...
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
### TextField 文本输入框
|
||||
|
||||
```dart
|
||||
TextField(
|
||||
autofocus: true,
|
||||
onChanged: (v) {
|
||||
print("onChange: $v");
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### LinearProgressIndicator 线性、条状的进度条
|
||||
|
||||
模糊进度条(会执行一个动画)
|
||||
|
||||
```dart
|
||||
LinearProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
),
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
进度条显示 `50%`
|
||||
|
||||
```dart
|
||||
LinearProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
value: .5,
|
||||
)
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### CircularProgressIndicator 圆形进度条
|
||||
|
||||
模糊进度条(会执行一个旋转动画)
|
||||
|
||||
```dart
|
||||
CircularProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
),
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
进度条显示 `50%`，会显示一个半圆
|
||||
|
||||
```dart
|
||||
CircularProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
value: .5,
|
||||
),
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### 自定义尺寸
|
||||
|
||||
线性进度条高度指定为 `3`
|
||||
|
||||
```dart
|
||||
SizedBox(
|
||||
height: 3,
|
||||
child: LinearProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
value: .5,
|
||||
),
|
||||
),
|
||||
```
|
||||
|
||||
圆形进度条直径指定为 `100`
|
||||
|
||||
```dart
|
||||
SizedBox(
|
||||
height: 100,
|
||||
width: 100,
|
||||
child: CircularProgressIndicator(
|
||||
backgroundColor: Colors.grey[200],
|
||||
valueColor: AlwaysStoppedAnimation(Colors.blue),
|
||||
value: .7,
|
||||
),
|
||||
),
|
||||
```
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user