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

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

特性

phoenix 将做为企业级基础组件:Dialog,提供项目支持。

开始使用

要开始使用 phoenix_dialog 插件，首先需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  phoenix_dialog: ^版本号

然后运行 flutter pub get 来安装依赖项。

使用示例

以下是一个完整的示例，展示了如何使用 phoenix_dialog 插件来创建各种类型的对话框。

主页代码

import 'package:flutter/material.dart';
import 'package:phoenix_base/phoenix.dart';
import 'package:phoenix_dialog/phoenix_dialog.dart';
import 'package:phoenix_loading/phoenix_loading.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: DialogEntryPage('Dialog'),
    );
  }
}

class DialogEntryPage extends StatelessWidget {
  final String title;

  DialogEntryPage(this.title);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
        children: [
          ListItem(
            title: "富文本弹窗",
            onPressed: () {
              _showRichTextDialog(context);
            },
          ),
          // 其他列表项...
        ],
      ),
    );
  }

  void _showRichTextDialog(BuildContext context) {
    DialogManager.showConfirmDialog(context,
        cancel: "取消",
        confirm: "确定",
        title: "标题",
        message: "辅助内容信息辅助内容信息辅助内容信息辅助内容信息辅助内容信息",
        messageWidget: Padding(
          padding: const EdgeInsets.only(top: 6, left: 24, right: 24),
          child: BrnCSS2Text.toTextView(
              "这是一条增使用标签修改文字颜色的example\<font color = '#8ac6d1'\>我是带颜色的文字</font>，"
              "这是颜色标签后边的文字", linksCallback: (String? text, String? linkUrl) {
            // 处理点击事件
          }),
        ),
        showIcon: true, onConfirm: () {
      // 确定按钮点击事件
    }, onCancel: () {
      Navigator.pop(context);
    });
  }
}

// 其他方法...

其他信息

phoenix 将做为企业级基础组件:Dialog,提供项目支持。

列表项类

class ListItem extends StatelessWidget {
  final String title;
  final VoidCallback onPressed;
  final bool isShowLine;
  final bool isSupportTheme;

  ListItem({
    required this.title,
    required this.onPressed,
    this.isShowLine = true,
    this.isSupportTheme = false,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: onPressed,
    );
  }
}

更多关于Flutter对话框管理插件phoenix_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter对话框管理插件phoenix_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用phoenix_dialog插件来管理对话框的示例代码。phoenix_dialog是一个功能强大的Flutter插件，用于简化对话框的管理。

首先，你需要在你的pubspec.yaml文件中添加phoenix_dialog依赖：

dependencies:
  flutter:
    sdk: flutter
  phoenix_dialog: ^latest_version  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们来看看如何在Flutter应用中使用phoenix_dialog。

1. 引入依赖和初始化

在你的主文件（通常是main.dart）中，引入phoenix_dialog并初始化：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PhoenixDialogExample(),
    );
  }
}

class PhoenixDialogExample extends StatefulWidget {
  @override
  _PhoenixDialogExampleState createState() => _PhoenixDialogExampleState();
}

class _PhoenixDialogExampleState extends State<PhoenixDialogExample> {
  late PhoenixDialog dialogService;

  @override
  void initState() {
    super.initState();
    dialogService = PhoenixDialog(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phoenix Dialog Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => showSimpleDialog(context),
              child: Text('Show Simple Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => showComplexDialog(context),
              child: Text('Show Complex Dialog'),
            ),
          ],
        ),
      ),
    );
  }

  void showSimpleDialog(BuildContext context) {
    dialogService.alert(
      context: context,
      title: "Simple Alert",
      message: "This is a simple alert dialog.",
      confirmButtonText: "OK",
    );
  }

  void showComplexDialog(BuildContext context) {
    dialogService.dialog(
      context: context,
      config: DialogConfig(
        title: "Complex Dialog",
        message: "This is a complex dialog with multiple options.",
        positiveButtonText: "Yes",
        negativeButtonText: "No",
        neutralButtonText: "Maybe",
        onPositiveButtonPressed: () {
          print("Positive button pressed");
        },
        onNegativeButtonPressed: () {
          print("Negative button pressed");
        },
        onNeutralButtonPressed: () {
          print("Neutral button pressed");
        },
      ),
    );
  }
}

2. 运行应用

现在，你可以运行你的Flutter应用，点击按钮将会展示不同类型的对话框。

解释

  • PhoenixDialogExample类是我们的主页面，其中包含了两个按钮，一个用于展示简单对话框，另一个用于展示复杂对话框。
  • initState方法中，我们初始化了PhoenixDialog实例。
  • showSimpleDialog方法使用alert方法展示一个简单的警告对话框。
  • showComplexDialog方法使用dialog方法展示一个包含多个选项的复杂对话框。

这个示例展示了如何使用phoenix_dialog插件来管理不同类型的对话框。你可以根据需要进一步自定义对话框的样式和行为。

回到顶部