From 0148846d7e9c18cf4e57fd9f4e06189c377f487c Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sun, 20 Nov 2022 17:19:32 +0800 Subject: [PATCH] doc: update flutter.md #58 #149 --- docs/flutter.md | 357 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 357 insertions(+) diff --git a/docs/flutter.md b/docs/flutter.md index 75fbd16..6da2ce2 100644 --- a/docs/flutter.md +++ b/docs/flutter.md @@ -56,6 +56,363 @@ C:\src>git clone https://github.com/flutter/flutter.git -b stable ``` +基础组件 +--- + +### 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 + ), +); +``` + + +### TextSpan 文本的一个“片段” + +```dart +Text.rich(TextSpan( + children: [ + TextSpan( + text: "Home: " + ), + TextSpan( + text: "https://flutter.dev", + style: TextStyle( + color: Colors.blue + ), + recognizer: _tapRecognizer + ), + ] +)) +``` + +### DefaultTextStyle 文本默认样式 + + +```dart +DefaultTextStyle( + // 1.设置文本默认样式 + style: TextStyle( + color:Colors.red, + fontSize: 20.0, + ), + textAlign: TextAlign.start, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("hello world"), + Text("I am Jack"), + Text("I am Jack", + style: TextStyle( + inherit: false, //2.不继承默认样式 + color: Colors.grey + ), + ), + ], + ), +); +``` + + +### 字体 + + +- 在 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, + ); + ``` + + +### 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, + ) + ``` + + +### 从网络加载图片 + +```dart +Image( + image: NetworkImage( + "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"), + width: 100.0, +) +``` + + +Image 也提供了一个快捷的构造函数 `Image.network` 用于从网络加载、显示图片： + +```dart +Image.network( + "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4", + width: 100.0, +) +``` + + +### Image 参数 + + +```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 复选框 + + +```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), +), +``` + + +进度条显示 `50%` + +```dart +LinearProgressIndicator( + backgroundColor: Colors.grey[200], + valueColor: AlwaysStoppedAnimation(Colors.blue), + value: .5, +) +``` + + +### CircularProgressIndicator 圆形进度条 + +模糊进度条(会执行一个旋转动画) + +```dart +CircularProgressIndicator( + backgroundColor: Colors.grey[200], + valueColor: AlwaysStoppedAnimation(Colors.blue), +), +``` + + +进度条显示 `50%`，会显示一个半圆 + +```dart +CircularProgressIndicator( + backgroundColor: Colors.grey[200], + valueColor: AlwaysStoppedAnimation(Colors.blue), + value: .5, +), +``` + + +### 自定义尺寸 + +线性进度条高度指定为 `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, + ), +), +``` + 另见 ---