Flutter入门|（三）基础控件

上篇文章讲解了两种Widget，这篇文章主要讲解一下常用的基础控件的使用方法。

图片

主要包含Image、Icon、RawImage、AssetBundle。

以下以Image的讲解为例。

Image

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

A widget that displays an image.
一个显示图片的widget

Image类似于Android中的ImageView，它主要负责在界面上展示一张图片，图片的来源可以是网络、文件、资源和内存，它们对应的构造函数分别是：

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

下面以加载一张网络图片为例：

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,
    );
  }
}

文本

文本Widget包括Text、RichText。文本样式有DefaultTextStyle。

以下以Text的讲解为例。

Text

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

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

下面给出一个最简单的Text实现：

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("这是Text的内容");
  }
}

以上使用的是Text的默认样式，实际应用场景中，我们大多需要自定义TextStyle，自定义文本样式，实现如下：

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "这是Text的内容",
      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".
一个扁平的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， 一个凸起的材质矩形按钮

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

输入框和选择框

常见的输入框和选择框有TextField、Checkbox、Radio、Switch、Slider、Date & Time Pickers。

以下以TextField的讲解为例。

TextField

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

A material design text field.
一个Material Design风格的文本输入框

TextField的实现需要设置一个 controller，用于获取用户输入的文本。

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

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

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

  @override
  void dispose() {
    super.dispose();
    // 手动调用 controller 的 dispose 方法以释放资源
    editingController.dispose();
  }
}

对话框、Alert、Panel

包括SimpleDialog、AlertDialog、BottomSheet、ExpansionPanel、SnackBar。

以下以AlertDialog的讲解为例。

AlertDialog

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

A material design alert dialog.
一个会中断用户操作的对话框，需要用户确认

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: editingController,
          ),
        ),
        RaisedButton(
          child: Text("click"),
          onPressed: () {
            showDialog(
                // 第一个 context 是参数名，第二个 context 是 State 的成员变量
                context: context,
                builder: (_) {
                  return AlertDialog(
                    // dialog 的内容
                    content: Text(editingController.text),
                    // actions 设置 dialog 的按钮
                    actions: [
                      FlatButton(
                        child: Text('确认'),
                        // 用户点击按钮后，关闭弹框
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  );
                }
            );
          }
        )
      ],
    );
  }

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