Wolt Modal Sheet 使用教程

Wolt Modal Sheet 使用教程

wolt_modal_sheetThis package provides a responsive modal with multiple pages, motion animation for page transitions, and scrollable content within each page.项目地址:https://gitcode.com/gh_mirrors/wo/wolt_modal_sheet

项目介绍

Wolt Modal Sheet 是一个 Flutter 包，提供了具有多页面动画的响应式模态窗口，支持页面过渡和每个页面内的可滚动内容。该包遵循 Wolt 设计系统规范，适用于 Android、iOS、Linux、macOS、Web 和 Windows 平台。

项目快速启动

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  wolt_modal_sheet: ^0.9.2

然后运行 flutter pub get 获取依赖。

基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 Wolt Modal Sheet：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wolt Modal Sheet 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              WoltModalSheet.show(
                context: context,
                pageListBuilder: (context, pageIndexNotifier) {
                  return [
                    WoltModalSheetPage(
                      child: Center(child: Text('页面 1')),
                    ),
                    WoltModalSheetPage(
                      child: Center(child: Text('页面 2')),
                    ),
                  ];
                },
              );
            },
            child: Text('显示模态窗口'),
          ),
        ),
      ),
    );
  }
}

应用案例和最佳实践

动态页面列表

Wolt Modal Sheet 支持动态更新页面列表，适用于需要根据用户输入动态调整内容的场景。

WoltModalSheet.showWithDynamicPath(
  context: context,
  pageListBuilderNotifier: pageListBuilderNotifier,
  pageIndexNotifier: pageIndexNotifier,
);

自定义模态类型

该包提供了四种模态类型：底部模态窗口、对话框、侧边模态窗口和警告对话框。你可以根据需要选择合适的类型。

WoltBottomSheetType()
WoltDialogType()
WoltSideSheetType()
WoltAlertDialogType()

状态管理集成

Wolt Modal Sheet 可以与流行的状态管理库（如 Bloc 和 Provider）集成，实现复杂的状态管理。

WoltModalSheet.show(
  context: context,
  pageListBuilder: (context, pageIndexNotifier) {
    return [
      WoltModalSheetPage(
        child: MyStatefulWidget(),
      ),
    ];
  },
);

典型生态项目

与 Provider 集成

以下是一个示例，展示如何使用 Provider 管理模态窗口中的状态：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MyModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wolt Modal Sheet 与 Provider 集成')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              WoltModalSheet.show(
                context: context,
                pageListBuilder: (context, pageIndexNotifier) {
                  return [
                    WoltModalSheetPage(
                      child: Consumer<MyModel>(
                        builder: (context, model, child) {
                          return Center(child: Text('状态: ${model.state}'));
                        },
                      ),
                    ),
                  ];
                },
              );
            },
            child: Text('显示模态窗口'),
          ),
        ),
      ),
   

wolt_modal_sheetThis package provides a responsive modal with multiple pages, motion animation for page transitions, and scrollable content within each page.项目地址:https://gitcode.com/gh_mirrors/wo/wolt_modal_sheet