代碼的世界從hello world開始，flutter也一樣。
創建一個項目，將lib文件夾下的main.dart改為如下代碼：
3 void main() => runApp(MyApp());
4
5 class MyApp extends StatelessWidget {
6 @override
7 Widget build(BuildContext context) {
8 return MaterialApp(
9 title: 'Flutter Demo',
10 home: Scaffold(
11 body: new Center(
12 child: new Text(
13 'hello world'
14 )
15 )
16 )
17 );
18 }
19 }
跑起來
hello world完成了。
先簡單介紹兩個組件
1、Scaffold
打開任意一款app，頂部標題欄、側邊抽屜、底部導航等...，基本上都有這里邊的一個或者幾個，基于這個現狀，material很貼心的提供了scaffold這個組件，相當于一個頁面的骨架，可以把上邊說的那些東西拼到里邊。
2、Center
很簡單的一句話，這個組件的子組件水平垂直居中。
這兩個只是簡單的介紹一下，以后再詳細說，接下來是這篇筆記的主角。
文本Widget
一、Text
hello world這個demo里用過了，相當于html里邊的<p></p>，但是又有所不同，都知道p標簽獨占一行，寬度如果沒有限制則為父級寬度，Text也是獨占一行，但是寬度為內容寬度，并且沒有width屬性。
看上邊的demo，是不是感覺字體有點小，還想換個顏色，加個下劃線...還有其他各種騷操作。
先看一下官網給出的Text
const Text(
String data, //文本上邊demo的hello world
{
Key key, //唯一標識，相當于react中map渲染節點的key
TextStyle style, //樣式
StrutStyle strutStyle, //？？？不知道干啥的
TextAlign textAlign, //對齊方式
TextDirection textDirection, //文本的書寫順序
Locale locale, //設置語言環境 就是國際化，多語言支持
bool softWrap, //文本過長是否自動換行
TextOverflow overflow, //對溢出文本的顯示方式
double textScaleFactor, //每個邏輯像素的字體像素數
int maxLines, //文本的最大行數
String semanticsLabel, //圖像的語義描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供圖像描述
}
)
接下來挨個看
1、TextStyle
設置字體的樣式
const TextStyle({
bool inherit: true, //是否繼承父級
Color color, //字體顏色
Color backgroundColor, //背景色
double fontSize, //字體大小
FontWeight fontWeight, //字體粗細
FontStyle fontStyle, //正常/斜體
double letterSpacing, //字符間距可為負
double wordSpacing, //字間距（英文單詞間距）
TextBaseline textBaseline, //文本對齊基線
Height height, //Text的高度，相當于行高
Local locale, //設置語言環境 就是國際化，多語言支持
Paint foreground, //不知道是啥
Paint background, //文本背景色作用和backgroundColor相同
List<Shadow> shadows, //文字陰影
TextDecoration decoration, //劃線
Color decorationColor, //劃線顏色
TextDecoration decorationStyle, //劃線種類
double decorationThickness, //劃線的粗細
String debugLabel, //文本樣式的文本描述，僅在debug模式下有效
String fontFamily,
List<String> fontFamilyFallback,
String package,
})
接下來詳解
color
flutter的color支持5種寫法
style: TextStyle(
color: Color(0xFF42A5F5), //十六進制色號兩個F的位置為透明度，取值范圍00～FF
color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5), //十六進制色號第一位為透明度，從00～FF
color: Color.fromARGB(255, 66, 165, 245), //十進制色號第一位為透明度，0~255
color: Color.fromRGBO(66, 165, 245, 1.0), //最后一位為透明度, 0.0~1.0
color: Colors.red //material內置
)
backgroundColor
背景色和color的寫法一樣
fontSize
字體大小，double類型
style: TextStyle(
fontSize: 30.0
)
不用寫單位，flutter的單位是dp。
letterSpacing
字符間距
style: TextStyle(
letterSpacing: 6.0
)
wordSpacing
style: TextStyle(
wordSpacing: 10.0
)
textBaseline
對齊基線，類似css的基線，alphabetic/ideographic兩個值
style: TextStyle(
textBaseline: TextBaseline.alphabetic
)
alphabetic：簡單理解為英文的對齊基線
ideographic：簡單理解為中文對齊基線
height
style: TextStyle(
height: 1.5
)
和css一樣1.5就是字體大小的1.5倍。
background
這個注意了，不是Color，是Paint。
style: TextStyle(
background: Paint() ..color = Colors.blue
)
這個和backgroundColor一樣，兩者不能共存。
..是dart語法糖，前一個函數的返回值的屬性，說的有點繞，看代碼。
Paint() ..color = Colors.blue;
//下邊代碼的簡寫
Paint pg = Paint();
pg.color = Colors.blue;
shadows
List類型
style = TextStyle(
shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 3 )]
)
這里說明一下參數
color：陰影顏色，
offset：兩個參數xy方向的偏移量，
blurRadius: 模糊程度
decoration
和css的text-decoration類似
style = TextStyle(
decoration: TextDecoration.underline
)
有5個值
underline：下劃線
none：無劃線
overline：上劃線
lineThrough：中劃線
combine：這個就厲害了，可以傳入一個List，三線齊劃
decorationColor
劃線的顏色，默認和字體顏色相同。
style: TextStyle(
decorationColor: Colors.black
)
decorationStyle
默認為實線
style = TextStyle(
decorationStyle: TextDecorationStyle.dashed
)
dashed：點劃線
dotted：虛線
double：雙劃線
solid：實線
wavy：波浪線
decorationThickness
劃線的粗細，默認為1
style = TextStyle(
decorationThickness: 3.0
)
debugLabel
style = TextStyle(
debugLabel: 'test
)
加上之后沒找到怎么看這個提示。。。
2、strutStyle
看文檔這個應該是style的簡寫，類似css里邊的background/font這種，可以把樣式寫到一起，樣式是有順序的，這里不研究了，不推薦這種寫法，可讀性不高不好維護。
3、textAlign
對齊方式，和css的text-align基本上相同
textAlign: TextAlign.start
start：起始位置
end：結束位置
center：居中
left：左對齊
right：右對齊
justify：兩端對齊
4、textDirection
textDirection: TextDirection.ltr
ltr：從左到右
rtl：從右到左
left to right，right to left
5、locale
locale: Locale('fr', 'CH')
這個不是添加了就會自動翻譯，還要配置其他東西，以及第三方包，以后再詳細說。
6、softWrap
softWrap: true
文本超出容器時是否自動換行，默認為true，為false時文本超出容器部分默認被剪切。
7、overflow
overflow: TextOverflow.clip
對文本溢出部分的處理，類似css中的overflow。
clip：切斷，超出部分不顯示，默認值
ellipsis：超出部分不顯示，顯示...
visible：超出部分強制顯示
fade：超出部分淡出
8、textScaleFactor
textScaleFactor: 1.5
縮放的倍數
9、maxLines
maxLines: 2
文本的最大行數
10、semanticsLabel
semanticsLabel: 'test'
這個應該是相當于html中img的alt。
下面上完整代碼，把上邊demo中的Center換成Container（相當于html中的div，下篇筆記詳細說），再加個width便于觀察樣式和屬性對文本的改變。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: new Container(
width: 400.0,
child: new Text(
'hello world hello world hello world hello world hello world hello world',
style: TextStyle(
color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),
backgroundColor: Colors.red,
fontSize: 30.0,
letterSpacing: 6.0,
wordSpacing: 15.0,
height: 2.0,
// background: Paint() ..color = Colors.blue,
shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 3 )],
decoration: TextDecoration.combine([
TextDecoration.underline,
TextDecoration.overline
]),
decorationColor: Colors.black,
decorationStyle: TextDecorationStyle.wavy,
decorationThickness: 3.0,
debugLabel: 'text'
),
textAlign: TextAlign.justify,
textDirection: TextDirection.rtl,
locale: Locale('fr', 'CH'),
softWrap: true,
overflow: TextOverflow.visible,
textScaleFactor: 1.5,
maxLines: 2,
semanticsLabel: 'test'
)
)
)
);
}
}
學習的時候建議不要像這里一樣加太多的樣式和屬性，不相關的屬性或者樣式先單獨練習再組合，有的需要配合使用，比如溢出softWrap、overflow、maxLines這些。
二、TextSpan
html里有個span這里有個TextSpan，作用基本相同，文字放一行，下面看代碼。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: new Center(
child: new Text.rich(
TextSpan(
children: [
new TextSpan(text: 'hello: '),
new TextSpan(
text: 'world',
style: TextStyle(
color: Colors.red
)
)
]
)
)
)
)
);
}
}
效果
TextSpan需要套一層Text.rich，可以有children，children同為TextSpan，可以分別加不同的樣式，這里只能加樣式，不可以加其他的屬性。文本組件到這里就結束了，如有遺漏歡迎補充，如有錯誤請指正。
