Flutter Dialog、BottomSheet

最新推荐文章于 2026-01-01 17:48:15 发布

原创最新推荐文章于 2026-01-01 17:48:15 发布 · 274 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

Flutter 专栏收录该内容

40 篇文章

订阅专栏

属性	说明
title	标题
content	内容
actions	按钮
applicationName	说明文字
applicationVersion	版本
applicationLegalese	版本

基本使用

请添加图片描述

class MyState extends State {
  AlertDialog delDialog(BuildContext context) {
    AlertDialog alertDialog = AlertDialog(
      title: Text("提示"),
      content: Text("确定要删除吗？"),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: Text("取消")),
        TextButton(onPressed: () => Navigator.pop(context), child: Text("确定")),
      ],
    );

    return alertDialog;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(""), centerTitle: true),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          OutlinedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return delDialog(context);
                },
              );
            },
            child: Text("弹窗"),
          ),
        ],
      ),
    );
  }
}

SimpleDialog

提供多个选项供用户选择
请添加图片描述

  SimpleDialog dialog2() {
    SimpleDialog simpleDialog = SimpleDialog(
      title: Text("选择颜色"),
      children: [
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context, "Red"),
          child: Text("红色"),
        ),
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context, "Blue"),
          child: Text("蓝色"),
        ),
      ],
    );
    return simpleDialog;
  }

AboutDialog

请添加图片描述

  AboutDialog dialog3() {
    AboutDialog aboutDialog = AboutDialog(
      applicationName: "关于",
      applicationVersion: "1.0.0",
      applicationLegalese: "© 2023 Flutter",
    );
    return aboutDialog;
  }

底部弹窗BottomSheet

请添加图片描述

class MyState extends State {
  
  @override
  Widget build(BuildContext context) {
    Widget widget = Column(
      children: [
        ListTile(title: Text("橘子"), onTap: () {}),
        ListTile(title: Text("西瓜"), onTap: () {}),
        ListTile(title: Text("苹果"), onTap: () {}),
        ListTile(title: Text("香蕉"), onTap: () {}),
      ],
    );

    return Scaffold(
      appBar: AppBar(title: Text(""), centerTitle: true),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          OutlinedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return widget;
                },
              );
            },
            child: Text("弹窗"),
          ),
        ],
      ),
    );
  }
}