Flutter常用Widget詳解（一）

前言

前幾篇文章大家已經對Flutter環境搭建、所用開發語言和一些繪圖原理有了一個初步瞭解，本篇是一個實戰篇，進行應用開發時首先要進行UI介面的開發，Flutter所展示的UI介面都是由一些Widget組合而成，Widget可以理解為我們原生開發中的UI控制元件和UI佈局控制元件。例如iOS中的UILabel、UIButton、UITableView，安卓中的Button、TextView、ListView等。下面帶大家一起來看一下常用的Widget使用方法。

常用Widget介紹

文字控制元件

文字控制元件是日常開發中最常用的控制元件，Flutter提供了兩個文字控制元件供我們使用，下面針對常用的幾個屬性進行介紹。

Text

Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  textAlign: TextAlign.center, // 文字對齊方式
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  softWrap: false, // true時會自動換行處理；false時會判定為有無限的水平空間，不會換行
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  maxLines: 1, //最大行數
  style: TextStyle(
    color: Colors.blue,
  ),
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  overflow: TextOverflow.ellipsis, //溢位處理，這裡ellipsis將多餘的內容設定為...
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  style: TextStyle( // 文字樣式
    color: Colors.red, // 文字顏色
    fontSize: 14, // 字型大小
    fontWeight: FontWeight.w600, // 字型粗細程度
    fontStyle: FontStyle.normal, // 字型樣式
    letterSpacing: 2, // 字母或字間距
    wordSpacing: 5, // 單詞間距
    height: 2, // 行高，值為字型大小的倍數
    shadows: [Shadow(color: Colors.red, offset: Offset(1, 1), blurRadius: 5)], // 陰影
  ),
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  style: TextStyle(
    decoration: TextDecoration.underline, // 文字裝飾，此處設定下劃線
    decorationColor: Colors.blue, // 文字裝飾顏色
    decorationStyle: TextDecorationStyle.dotted, // 文字裝飾樣式
  ),
),
複製程式碼

顯示效果如下圖：

RichText

富文字控制元件，可以對一段連續的文字設定不用的樣式，實戰中比較常見。

RichText(
  text: TextSpan(
    text: 'Flutter',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: ' allows you',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.solid,
        ),
      ),
      TextSpan(
        text: ' to build beautiful native apps',
        style: TextStyle(
          fontSize: 18,
        )
      ),
      TextSpan(
        text: ' on iOS and Android',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        )
      ),
      TextSpan(
          text: ' from a single codebase.',
          style: TextStyle(
            shadows: [Shadow(color: Colors.black38, offset: Offset(3, 3))],
          )
      ),
    ],
  ),
)
複製程式碼

顯示效果如下圖：

圖片控制元件

Image

Image.asset(
  'images/flutter_logo.png', //圖片資源路徑
),
Image.asset(
  'images/flutter_logo.png',
  width: 100, //圖片寬度
  height: 100, //圖片高度
  fit: BoxFit.fill, //適配顯示方式，fill表示寬高填充滿
),
Image.asset(
  'images/flutter_logo.png',
  color: Colors.red, //混合的顏色，和colorBlendMode一起使用
  colorBlendMode: BlendMode.overlay, //顏色和圖片混合模式，功能較強大，其它模式參見官方文件或原始碼
),
Image.asset(
  'images/flutter_logo.png',
  width: 200,
  height: 200,
  repeat: ImageRepeat.repeat, //在寬高內重複平鋪圖片，直到鋪滿
)
複製程式碼

顯示效果如下圖：

除以上使用的Image.asset()建構函式外，Image還有Image.file()、Image.network()和Image.memory()等命名建構函式。

• Image.file

可通過路徑載入SD卡中儲存的圖片，安卓使用此方法時需要申請android.permission.READ_EXTERNAL_STORAGE許可權。

• Image.network 可通過url載入網路圖片。

• Image.memory 可通過Uint8List物件載入記憶體中的圖片。

Icon

Icon(
  Icons.adb,
),
Icon(
  Icons.adb,
  size: 50, //icon大小
),
Icon(
  Icons.adb,
  color: Colors.red, //icon顏色
)
複製程式碼

顯示效果如下圖：

按鈕控制元件

按鈕控制元件在Flutter中有兩種風格的button，安卓Material Design風格和iOS Cupertino風格。

RaisedButton

RaisedButton(
  onPressed: null, // onPressed為null視為不可點選
  disabledTextColor: Colors.grey, // 不可點選的文字顏色
  disabledColor: Colors.blue, // 不可點選的按鈕顏色
  disabledElevation: 5, // 不可點選時圖層高度
  child: Text('Disabled Button'),
),
RaisedButton(
  onPressed: () { // onPressed不為null視為可點選
    print('You click the button');
  },
  textColor: Colors.white, // 文字顏色
  color: Colors.blueAccent, // 按鈕顏色
  highlightColor: Colors.lightBlue, //點選按鈕後高亮的顏色
  elevation: 5, // 按鈕圖層高度
  highlightElevation: 8, // 點選按鈕高亮後的圖層高度
  animationDuration: Duration(milliseconds: 300), // 點選按鈕後過渡動畫時間
  child: Text('ClickButton'),
)
複製程式碼

顯示效果如下圖：

CupertinoButton

CupertinoButton(
  child: Text('Click'),
  disabledColor: Colors.blueGrey, //不可點選時按鈕顏色，color屬性不設定該值無效
  onPressed: null, // onPressed為null視為不可點選
),
CupertinoButton(
  child: Text('Click'),
  color: Colors.lightBlue,
  disabledColor: Colors.blueGrey, //不可點選時按鈕顏色，color屬性不設定該值無效
  onPressed: null, // onPressed為null視為不可點選
),
CupertinoButton(
  child: Text('Click'),
  color: Colors.lightBlue, // 按鈕顏色
  borderRadius: BorderRadius.all(Radius.circular(15.0)), // 按鈕圓角設定
  onPressed: () { // onPressed不為null視為可點選
    print('You click the button');
  },
)
複製程式碼

顯示效果如下圖：

輸入控制元件

輸入控制元件同樣有兩種風格，分別是Material Design風格的TextField和Cupertino風格的CupertinoTextField。

TextField

TextField(
  controller: TextEditingController(text: 'Hello Flutter'), // 預設輸入內容
),
TextField(
  decoration: InputDecoration( //輸入框裝飾
    hintText: 'please input something', // 輸入提示
    contentPadding: EdgeInsets.all(10), // 輸入框內容padding值
  ),
),
TextField(
  decoration: InputDecoration(
    labelText: 'Nickname', // 輸入框文字標籤
    labelStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold), // 標籤文字風格
    hintText: 'please input nickname', // 輸入提示
    helperText: 'nickname可由大小寫字母、數字和下劃線組合，不能包含特殊字元', // 幫助提示文字
  ),
),
TextField(
  decoration: InputDecoration(
    labelText: 'Password', // 輸入框文字標籤
    labelStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold), // 標籤文字風格
    hintText: 'please input password', // 輸入提示
    errorText: 'password輸入錯誤', // 錯誤提示文字
    prefixIcon: Icon(Icons.security), // 輸入框字首圖示
  ),
)
複製程式碼

顯示效果如下圖：

CupertinoTextField

CupertinoTextField(
  controller: TextEditingController(text: 'Hello Flutter'), // 預設輸入內容
),
CupertinoTextField(
  placeholder: 'please input something', // 輸入提示
  padding: EdgeInsets.only(left: 10, right: 10), // 輸入框內容padding值
),
CupertinoTextField(
  placeholder: 'please input something', // 輸入提示
  decoration: BoxDecoration( // 文字框裝飾
    color: Colors.lightBlue, // 文字框顏色
    border: Border.all(color: Colors.red, width: 1), // 輸入框邊框
    borderRadius: BorderRadius.all(Radius.circular(10)), // 輸入框圓角設定
    boxShadow: [BoxShadow(color: Colors.redAccent, offset: Offset(0, 5))], //裝飾陰影
  ),
),
CupertinoTextField(
  decoration: BoxDecoration( // 文字框裝飾
      image: DecorationImage( //文字框裝飾背景圖片
image: AssetImage('images/flutter_logo.png'),
repeat: ImageRepeat.repeat,
      )
  ),
),
CupertinoTextField(
  placeholder: 'please input something', // 輸入提示
  prefix: Text('使用者名稱:'), // 輸入框字首圖文
),
CupertinoTextField(
  placeholder: 'please input something', // 輸入提示
  prefix: Icon(Icons.security), // 輸入框字首圖文
  enabled: false, // 是否可編輯
)
複製程式碼

顯示效果如下圖：

從TextField和CupertinoTextField的屬性設定來看，還是有很多實現不一樣的地方，所以如果大家要針對iOS和安卓手機原有的風格開發UI時，要根據平臺不同使用不同的Widget來實現，不同風格的Widget屬性要熟練掌握。具體其它的一些屬性請參考官方文件或原始碼。

選擇控制元件

選擇控制元件包括Material Design風格的Checkbox、Radio、Switch、Slider和Cupertino風格的CupertinoSwitch、CupertinoSlider、CupertinoSegmentedControl等。

Checkbox

Checkbox(
  value: true,
  onChanged: null,
  tristate: true,
),
Checkbox(
  value: null, // 為null時tristate值必須為true，表示有三種狀態
  onChanged: (checked) {},
  activeColor: Colors.redAccent, // checkbox顏色
  tristate: true, // 是否有三種狀態
),
Checkbox(
  value: false, // 未選中狀態
  onChanged: (checked) {},
  activeColor: Colors.redAccent, // checkbox顏色
  tristate: false, // 是否有三種狀態
),
Checkbox(
  value: true, // 選中狀態
  onChanged: (checked) {},
  activeColor: Colors.redAccent, // checkbox顏色
  tristate: false, // 是否有三種狀態
),
Checkbox(
  value: isChecked, // 控制元件狀態值
  onChanged: (checked) {
    print("checked = $checked");
    setState(() { // 狀態改變後需要通過setState重新整理Widget改變狀態
      this.isChecked = checked;
    });
  },
  tristate: true, //是否有三種狀態
  activeColor: Colors.blueAccent, // checkbox顏色
)
複製程式碼

顯示效果如下圖：

Radio

String _character = 'A';

Radio<String>(
  value: 'A', // 代表的值
  groupValue: _character, // 當前radio group選中的值，當該值與value值匹配時則被選中
  onChanged: (String newValue) {
    setState(() { // 點選當前控制元件時更新狀態
      _character = newValue;
    });
  },
),
Radio<String>(
  value: 'B',
  groupValue: _character,
  onChanged: (String newValue) {
    setState(() {
      _character = newValue;
    });
  },
),
Radio<String>(
  value: 'C',
  groupValue: _character,
  onChanged: (String newValue) {
    setState(() {
      _character = newValue;
    });
  },
)
複製程式碼

顯示效果如下圖：

Switch

bool _switchChecked = true;

Switch(
  value: true,
  activeColor: Colors.blueAccent, // 啟用狀態開關顏色
  activeTrackColor: Colors.lightBlue, //啟用狀態開關軌道顏色
  onChanged: null, // 為null時則開關不可操作
),
Switch(
  value: true,
  activeColor: Colors.blueAccent, // 啟用狀態開關顏色
  activeTrackColor: Colors.lightBlue, //啟用狀態開關軌道顏色
  onChanged: (flag) {}, // 為null時則開關不可操作
),
Switch(
  value: false,
  inactiveThumbColor: Colors.white, // 未啟用狀態開關顏色
  inactiveTrackColor: Colors.grey, // 未啟用狀態開關軌道顏色
  onChanged: (flag) {},
),
Switch(
  value: _switchChecked,
  onChanged: (flag) {
    setState(() { // 狀態改變是通過setState改變狀態值
      _switchChecked = flag;
    });
  },
)
複製程式碼

顯示效果如下圖：

Slider

double _sliderValue = 0.3;

Slider(
  value: _sliderValue, // 當前滑塊定位到的值
  onChanged: (val) { // 滑動監聽
    setState(() { // 通過setState設定當前值
      _sliderValue = val;
    });
  },
  onChangeStart: (val) { // 開始滑動時的監聽
    print('changeStart: val = $val');
  },
  onChangeEnd: (val) { // 滑動結束時的監聽
    print('changeEnd: val = $val');
  },
  min: 0, // 最小值
  max: 1, // 最大值
  activeColor: Colors.blueAccent, //滑動過的顏色
  inactiveColor: Colors.lightBlueAccent, //未達到的顏色
)
複製程式碼

顯示效果如下圖：

CupertinoSwitch

bool _switchChecked = true;

CupertinoSwitch(
  value: true, //開關值
),
CupertinoSwitch(
  value: false,
),
CupertinoSwitch(
  value: _switchChecked,
  onChanged: (flag) {
    setState(() { // 狀態改變是通過setState改變狀態值
      _switchChecked = flag;
    });
  },
)
複製程式碼

顯示效果如下圖：

CupertinoSlider

CupertinoSlider(
  value: _sliderValue, // 當前滑塊定位到的值
  onChanged: (val) { // 滑動監聽
    setState(() { // 通過setState設定當前值
      _sliderValue = val;
    });
  },
  onChangeStart: (val) { // 開始滑動時的監聽
    print('changeStart: val = $val');
  },
  onChangeEnd: (val) { // 滑動結束時的監聽
    print('changeEnd: val = $val');
  },
  min: 0, // 最小值
  max: 1, // 最大值
  activeColor: Colors.red, //滑動過的顏色
)
複製程式碼

顯示效果如下圖：

CupertinoSegmentedControl

Map<String, Text> map = {'apple': Text('Apple'), 'orange': Text('Orange'), 'banana': Text('Banana')};
String _fruit = 'apple';
  
CupertinoSegmentedControl(
  children: map, // 資料
  groupValue: _fruit, // 選中的資料
  onValueChanged: (fruit) {
    setState(() { // 資料改變時通過setState改變選中狀態
      _fruit = fruit;
    });
  },
  unselectedColor: CupertinoColors.white, // 未選中顏色
  selectedColor: CupertinoColors.activeBlue, // 選中顏色
  borderColor: CupertinoColors.activeBlue, // 邊框顏色
  pressedColor: const Color(0x33007AFF), // 點選時候的顏色
)
複製程式碼

顯示效果如下圖：

總結

以上為部分常用Widget的一些常用屬性詳細介紹，其他常用Widget後續繼續分享。

說明： 文章轉載自對應的“Flutter程式設計指南”微信公眾號，更多Flutter相關技術文章請關注微信公眾號獲取。