Flutter AlertDialog showModalBot

直接看代码案例快速入手Flutter

本文介绍AlertDialog, showModalBottomSheet.

AlertDialog是显示在屏幕中间的弹窗，类似于iOS的AlertViewController, showModalBottomSheet是一个函数，从屏幕底下弹出来的弹窗，类似于iOS的ActionSheet.

🎉下载GitHub仓库，直接体验

AlertDialog

showDialog(
    context: context,
    builder: (BuildContext context) {
    return const AlertDialog(
        title: Text('AlertDialog Title'),
        content: Text('This is a simple alert dialog.'),
    );
    },
);

showDialog(
    context: context,
    builder: (BuildContext context) {
    return AlertDialog(
        title: const Text('AlertDialog Title'),
        content: const Text('This is a simple alert dialog.'),
        actions: <Widget>[
        TextButton(
            child: const Text('Cancel'),
            onPressed: () {
            Navigator.of(context).pop();
            },
        ),
        TextButton(
            child: const Text('OK'),
            onPressed: () {
            Navigator.of(context).pop();
            },
        ),
        ],
    );
    },
);

showDialog(
    context: context,
    builder: (BuildContext context) {
    return _AlertDialogWithCheckbox(
        onCheckboxChanged: (isChecked) {
        // 这里你可以获取到 isChecked 值
        debugPrint('Checkbox isChecked: $isChecked');
        },
    );
    },
);

showModalBottomSheet

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
    return const SizedBox(
        height: 200,
        child: Center(child: Text('Hello, World!')),
    );
    },
);

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
    return SizedBox(
        height: 200,
        child: ListView(
        children: <Widget>[
            ListTile(
            leading: const Icon(Icons.music_note),
            title: const Text('Music'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
            ListTile(
            leading: const Icon(Icons.videocam),
            title: const Text('Video'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
        ],
        ),
    );
    },
);

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.white,
    shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
        top: Radius.circular(25.0),
    ),
    ),
    builder: (BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(16),
        child: ListView(
        shrinkWrap: true,
        children: <Widget>[
            ListTile(
            leading: const Icon(Icons.music_note),
            title: const Text('Music'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
            ListTile(
            leading: const Icon(Icons.videocam),
            title: const Text('Video'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
        ],
        ),
    );
    },
);

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
    return Container(
        height: 200,
        color: Colors.orange,
        child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: List.generate(
            3,
            (index) => Text('Item $index',
                style: const TextStyle(backgroundColor: Colors.blue))),
        ),
    );
    },
);

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
    return Container(
        height: 200,
        margin: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: Colors.white,
        ),
        child: ListView(
        children: <Widget>[
            ListTile(
            leading: const Icon(Icons.music_note),
            title: const Text('Music'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
            ListTile(
            leading: const Icon(Icons.videocam),
            title: const Text('Video'),
            onTap: () {
                // Do something
                Navigator.pop(context);
            },
            ),
        ],
        ),
    );
    },
);