Flutter入门|(三)基础控件

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

图片

主要包含ImageIconRawImageAssetBundle

以下以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包括TextRichText。文本样式有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中的按钮包括FlatButtonRaisedButtonFloatingActionButtonIconButtonPopupMenuButton以及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;
  }
}

输入框和选择框

常见的输入框和选择框有TextFieldCheckboxRadioSwitchSliderDate & 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<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();
    // 手动调用 controller 的 dispose 方法以释放资源
    editingController.dispose();
  }
}

对话框、Alert、Panel

包括SimpleDialogAlertDialogBottomSheetExpansionPanelSnackBar

以下以AlertDialog的讲解为例。

AlertDialog

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

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

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(
                // 第一个 context 是参数名,第二个 context 是 State 的成员变量
                context: context,
                builder: (_) {
                  return AlertDialog(
                    // dialog 的内容
                    content: Text(editingController.text),
                    // actions 设置 dialog 的按钮
                    actions: <Widget>[
                      FlatButton(
                        child: Text('确认'),
                        // 用户点击按钮后,关闭弹框
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  );
                }
            );
          }
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    editingController.dispose();
  }
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值