美文网首页Flutter教学
Flutter(24):Material组件之SimpleDia

Flutter(24):Material组件之SimpleDia

作者: starryxp | 来源:发表于2020-09-30 14:45 被阅读0次

Flutter教学目录持续更新中

Github源代码持续更新中

1.SimpleDialog介绍

简单对话框可以显示附加的提示或操作

2.SimpleDialog属性

  • title:标题
  • titlePadding:EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),标题内边距
  • titleTextStyle:标题样式
  • children:子节点
  • contentPadding:EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),内容内边距
  • backgroundColor:背景色
  • elevation:阴影
  • shape:形状

3.SimpleDialogOption属性

  • onPressed:点击事件
  • padding:内边距
  • child:子节点

4.SimpleDialog

SimpleDialog的children是被SingleChildScrollView包裹的,是一个滑动组件


1601444876(1).png
class _SimpleDialogPageState extends State<SimpleDialogPage> {
  SimpleDialog _dialog;

  _createSimpleDialogOption(String s) {
    return SimpleDialogOption(
      onPressed: () {
        ToastUtil.showToast(s);
      },
      padding: EdgeInsets.all(10),
      child: Text(s),
    );
  }

  _createSimpleDialog() {
    return SimpleDialog(
      title: Text('SimpleDialog'),
      titleTextStyle: TextStyle(
          fontSize: 16, fontWeight: FontWeight.bold, color: Colors.blue),
      children: [
        Text(
          "data",
          textAlign: TextAlign.center,
        ),
        _createSimpleDialogOption('内容1'),
        _createSimpleDialogOption('内容2'),
        _createSimpleDialogOption('内容3'),
        _createSimpleDialogOption('内容4'),
        Icon(Icons.account_circle),
        SimpleDialogOption(
          onPressed: () {},
          padding: EdgeInsets.all(10),
          child: Icon(Icons.headset),
        ),
      ],
      backgroundColor: Colors.white,
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SimpleDialog'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10),
        children: [
          RaisedButton(
            onPressed: () {
              if (_dialog == null) {
                _dialog = _createSimpleDialog();
              }
              showDialog(
                context: context,
                builder: (context) {
                  return _dialog;
                },
              );
            },
            child: Text('打开SimpleDialog'),
          )
        ],
      ),
    );
  }
}

下一节:Material组件之AlertDialog

Flutter(25):Material组件之AlertDialog

Flutter教学目录持续更新中

Github源代码持续更新中

相关文章

网友评论

    本文标题:Flutter(24):Material组件之SimpleDia

    本文链接:https://www.haomeiwen.com/subject/nfsuuktx.html