Flutter經常使用Widget詳解（一）

時間  2019-11-17
標籤 flutter 經常 使用 widget 詳解 简体版
原文   原文鏈接

前言

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

經常使用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, // 文本裝飾樣式
  ),
),
複製代碼

顯示效果以下圖：bash

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, //在寬高內重複平鋪圖片，直到鋪滿
)
複製代碼

顯示效果以下圖：app

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

  • 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相關技術文章請關注微信公衆號獲取。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程