上篇文章講解了兩種Widget熔吗，這篇文章主要講解一下常用的基礎(chǔ)控件的使用方法姆钉。

圖片

主要包含Image吆倦、Icon听诸、RawImage、AssetBundle蚕泽。

以下以Image的講解為例晌梨。

Image

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatefulWidget -> Image

A widget that displays an image.
一個(gè)顯示圖片的widget

Image類似于Android中的ImageView桥嗤，它主要負(fù)責(zé)在界面上展示一張圖片，圖片的來(lái)源可以是網(wǎng)絡(luò)仔蝌、文件泛领、資源和內(nèi)存，它們對(duì)應(yīng)的構(gòu)造函數(shù)分別是：

Image.asset(name);
Image.file(file);
Image.memory(bytes);
Image.network(src);

下面以加載一張網(wǎng)絡(luò)圖片為例：

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547144228723&di=702d9b2eb198bbd796c5af4252fd6b9c&imgtype=0&src=http%3A%2F%2Fp3.ifengimg.com%2F2019_01%2FC238CA978AEA9E97961FE9D02DDDDDBEF79E5C8C_w1270_h679.jpg",
      width: 360.0,
      height: 200.0,
    );
  }
}

文本

文本W(wǎng)idget包括Text敛惊、RichText渊鞋。文本樣式有DefaultTextStyle。

以下以Text的講解為例瞧挤。

Text

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> Text

A run of text with a single style.
單一樣式/格式的文本

下面給出一個(gè)最簡(jiǎn)單的Text實(shí)現(xiàn)：

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("這是Text的內(nèi)容");
  }
}

以上使用的是Text的默認(rèn)樣式锡宋，實(shí)際應(yīng)用場(chǎng)景中，我們大多需要自定義TextStyle特恬，自定義文本樣式执俩，實(shí)現(xiàn)如下：

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "這是Text的內(nèi)容",
      style: TextStyle(
        color: Colors.red,
        fontSize: 18.0,
        fontWeight: FontWeight.bold
      ),
    );
  }
}

按鈕

Flutter中的按鈕包括FlatButton、RaisedButton鸵鸥、FloatingActionButton奠滑、IconButton、PopupMenuButton以及ButtonBar等妒穴。

以下以FlatButton和RaisedButton的講解為例宋税。

FlatButton

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> MaterialButton -> FlatButton

A material design "flat button".
一個(gè)扁平的Material按鈕

class FlatButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var flatBtn = FlatButton(
      onPressed: () => print('FlatButton pressed'),
      child: Text('FlatButton'),
    );
    return flatBtn ;
  }
}

RaisedButton

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> MaterialButton -> RaisedButton

A material design "raised button".
Material Design中的button， 一個(gè)凸起的材質(zhì)矩形按鈕

class RaisedButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var raisedButton = RaisedButton(
      onPressed: () => print('RaisedButton pressed'),
      child: Text('RaisedButton'),
    );
    return raisedButton;
  }
}

輸入框和選擇框

常見(jiàn)的輸入框和選擇框有TextField讼油、Checkbox杰赛、Radio、Switch矮台、Slider乏屯、Date & Time Pickers。

以下以TextField的講解為例瘦赫。

TextField

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatefulWidget -> TextField

A material design text field.
一個(gè)Material Design風(fēng)格的文本輸入框

TextField的實(shí)現(xiàn)需要設(shè)置一個(gè) controller辰晕，用于獲取用戶輸入的文本。

class TextFieldWidget extends StatefulWidget {
  @override
  State createState() {
    return _TextFieldState();
  }
}

class _TextFieldState extends State<TextFieldWidget> {
  var editingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // Row确虱、Expand 都是用于布局的控件含友，這里可以先忽略它們
    return Row(
      children: <Widget>[
        Expanded(
          child: TextField(
            controller: editingController,
          ),
        ),
        RaisedButton(
          child: Text("RaisedButton"),
          onPressed: () => print('您輸入了: ${editController.text}'),
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    // 手動(dòng)調(diào)用 controller 的 dispose 方法以釋放資源
    editingController.dispose();
  }
}

對(duì)話框、Alert校辩、Panel

包括SimpleDialog窘问、AlertDialog、BottomSheet宜咒、ExpansionPanel惠赫、SnackBar。

以下以AlertDialog的講解為例故黑。

AlertDialog

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> AlertDialog

A material design alert dialog.
一個(gè)會(huì)中斷用戶操作的對(duì)話框儿咱，需要用戶確認(rèn)

class _TextFieldState extends State<TextFieldWidget> {
  var editingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: TextField(
            controller: editingController,
          ),
        ),
        RaisedButton(
          child: Text("click"),
          onPressed: () {
            showDialog(
                // 第一個(gè) context 是參數(shù)名庭砍，第二個(gè) context 是 State 的成員變量
                context: context,
                builder: (_) {
                  return AlertDialog(
                    // dialog 的內(nèi)容
                    content: Text(editingController.text),
                    // actions 設(shè)置 dialog 的按鈕
                    actions: <Widget>[
                      FlatButton(
                        child: Text('確認(rèn)'),
                        // 用戶點(diǎn)擊按鈕后，關(guān)閉彈框
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  );
                }
            );
          }
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    editingController.dispose();
  }
}