Flutter对话框管理插件easy_dialogs的使用

Flutter对话框管理插件easy_dialogs的使用

easy_dialogs 是一个用于在Flutter应用程序中创建易于使用的对话框的插件，特别是带有列表选择功能的对话框。它提供了两种主要类型的对话框：SingleChoiceDialog 和 SingleChoiceConfirmationDialog。下面将详细介绍如何使用这些对话框，并提供一个完整的示例demo。

1. SingleChoiceConfirmationDialog

SingleChoiceConfirmationDialog 是一种带有确认按钮的单选对话框，用户可以选择一个选项并点击“确定”或“取消”来提交或取消选择。

单选确认对话框示例1

SingleChoiceConfirmationDialog<String>(
    title: Text('Phone ringtone'),  // 对话框标题
    initialValue: _ringTone,        // 初始选中的值
    items: _ringTones,              // 可选项目列表
    onSelected: _onSelected,        // 选择项时的回调函数
    onSubmitted: _onSubmitted)      // 点击“确定”按钮时的回调函数

单选确认对话框示例2

SingleChoiceConfirmationDialog<Color>(
    title: Text('Color'),           // 对话框标题
    initialValue: _color,          // 初始选中的颜色
    items: _colors,                // 可选颜色列表
    contentPadding: EdgeInsets.symmetric(vertical: 16.0),  // 内边距
    divider: Container(            // 分割线样式
      height: 1.0,
      color: Colors.blue,
    ),
    onSubmitted: (Color color) {   // 点击“确定”按钮时的回调函数
      setState(() => _color = color);
    },
    itemBuilder: (Color color) =>  // 自定义每个选项的显示方式
        Container(height: 100.0, color: color))

2. SingleChoiceDialog

SingleChoiceDialog 是一种不带确认按钮的单选对话框，用户选择一个选项后，对话框会立即关闭。

单选对话框示例

SingleChoiceDialog<Color>(
    isDividerEnabled: true,        // 是否启用分割线
    title: Text('Pick a color'),   // 对话框标题
    items: _colors,                // 可选颜色列表
    onSelected: (Color color) {    // 选择项时的回调函数
      setState(() => _color = color);
    },
    itemBuilder: (Color color) =>  // 自定义每个选项的显示方式
        Container(height: 100.0, color: color))

3. 完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 easy_dialogs 插件来创建和管理对话框。

import 'package:flutter/material.dart';
import 'package:easy_dialogs/easy_dialogs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Easy Dialogs Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),  // 设置主页为HomePage
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  HomePageState createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  // 定义铃声选项列表
  final List<String> _ringTones = [
    'None',
    'Callisto',
    'Ganymede',
    'Luna',
    'Oberon',
    'Phobos',
    'Dione',
    'Jungle Gym',
    'Ukulele',
    'Snowflakes',
  ];

  // 定义颜色选项列表
  final List<Color> _colors = [
    Colors.orange,
    Colors.pinkAccent,
    Colors.black,
    Colors.blue,
    Colors.brown,
    Colors.green,
  ];

  // 当前选中的铃声
  String _ringTone = "None";

  // 当前选中的颜色
  Color _color = Colors.black;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),  // 设置页面标题
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            onTap: _openRingtoneDialog,  // 点击时打开铃声选择对话框
            title: Text('Ringtone'),     // 选项标题
            subtitle: Text(_ringTone),   // 显示当前选中的铃声
            leading: Icon(Icons.music_note),  // 图标
          ),
          ListTile(
            onTap: _openColorDialog,  // 点击时打开颜色选择对话框（带确认）
            title: Text('Color'),     // 选项标题
            subtitle: Container(
              margin: EdgeInsets.only(top: 8.0),
              height: 20.0,
              color: _color,  // 显示当前选中的颜色
            ),
            leading: Icon(Icons.colorize),  // 图标
          ),
          ListTile(
            onTap: _openColorDialogWithoutConfirmation,  // 点击时打开颜色选择对话框（不带确认）
            title: Text('Color without confirmation'),   // 选项标题
            subtitle: Container(
              margin: EdgeInsets.only(top: 8.0),
              height: 20.0,
              color: _color,  // 显示当前选中的颜色
            ),
            leading: Icon(Icons.colorize),  // 图标
          ),
        ],
      ),
    );
  }

  // 打开铃声选择对话框
  _openRingtoneDialog() {
    showDialog(
        context: context,
        builder: (context) => SingleChoiceConfirmationDialog<String>(
            title: Text('Phone ringtone'),  // 对话框标题
            initialValue: _ringTone,        // 初始选中的铃声
            items: _ringTones,              // 可选铃声列表
            onSelected: _onSelected,        // 选择项时的回调函数
            onSubmitted: _onSubmitted));    // 点击“确定”按钮时的回调函数
  }

  // 打开颜色选择对话框（带确认）
  _openColorDialog() {
    showDialog(
      context: context,
      builder: (context) => SingleChoiceConfirmationDialog<Color>(
            title: Text('Color'),           // 对话框标题
            initialValue: _color,           // 初始选中的颜色
            items: _colors,                 // 可选颜色列表
            contentPadding: EdgeInsets.symmetric(vertical: 16.0),  // 内边距
            divider: Container(             // 分割线样式
              height: 1.0,
              color: Colors.blue,
            ),
            onSubmitted: (Color color) {    // 点击“确定”按钮时的回调函数
              setState(() => _color = color);
            },
            itemBuilder: (Color color) =>   // 自定义每个选项的显示方式
                Container(height: 100.0, color: color),
          ),
    );
  }

  // 打开颜色选择对话框（不带确认）
  _openColorDialogWithoutConfirmation() {
    showDialog(
        context: context,
        builder: (context) => SingleChoiceDialog<Color>(
              isDividerEnabled: true,       // 启用分割线
              title: Text('Pick a color'),  // 对话框标题
              items: _colors,               // 可选颜色列表
              onSelected: (Color color) {  // 选择项时的回调函数
                setState(() => _color = color);
              },
              itemBuilder: (Color color) => // 自定义每个选项的显示方式
                  Container(height: 100.0, color: color),
            ));
  }

  // 处理铃声选择
  void _onSelected(String value) {
    print('Selected $value');  // 打印选择的铃声
    setState(() {
      _ringTone = value;  // 更新当前选中的铃声
    });
  }

  // 处理铃声确认
  void _onSubmitted(String value) {
    print('Submitted $value');  // 打印确认的铃声
    setState(() {
      _ringTone = value;  // 更新当前选中的铃声
    });
  }
}