Flutter底部操作表插件wx_sheet的使用

wx_sheet 插件是一个用于在 Flutter 中创建底部操作表的库。通过该插件，你可以轻松地实现自定义样式的底部操作表。

使用

要了解更多关于 wx_sheet 中使用的类和其他参考信息，请参阅 API 参考文档。

基础示例

WxSheet(
  variant: WxSheetVariant.tonal,
  borderRadius: BorderRadius.all(Radius.circular(5)),
  child: Center(child: Text('Tonal')),
)

不同变体的圆形按钮

Wrap(
  spacing: 10,
  children: [
    WxSheet.circle(
      radius: 50,
      child: Center(child: Text('Text')),
    ),
    WxSheet.circle(
      radius: 50,
      variant: WxSheetVariant.tonal,
      child: Center(child: Text('Tonal')),
    ),
    WxSheet.circle(
      radius: 50,
      variant: WxSheetVariant.elevated,
      child: Center(child: Text('Elevated')),
    ),
    WxSheet.circle(
      radius: 50,
      variant: WxSheetVariant.filled,
      child: Center(child: Text('Filled')),
    ),
    WxSheet.circle(
      radius: 50,
      variant: WxSheetVariant.outlined,
      child: Center(child: Text('Outlined')),
    ),
  ],
)

不同严重程度的矩形按钮

Wrap(
  spacing: 10,
  children: [
    WxSheet(
      width: 100,
      height: 100,
      severity: Colors.red,
      child: Center(
        child: WxTextTile(
          align: WxTextAlign.center,
          title: Text('Text'),
          subtitle: Text('Danger'),
        ),
      ),
    ),
    WxSheet(
      width: 100,
      height: 100,
      severity: Colors.yellow,
      child: Center(
        child: WxTextTile(
          align: WxTextAlign.center,
          title: Text('Text'),
          subtitle: Text('Warning'),
        ),
      ),
    ),
    WxSheet(
      width: 100,
      height: 100,
      severity: Colors.green,
      child: Center(
        child: WxTextTile(
          align: WxTextAlign.center,
          title: Text('Text'),
          subtitle: Text('Success'),
        ),
      ),
    ),
    WxSheet(
      width: 100,
      height: 100,
      severity: Colors.blue,
      child: Center(
        child: WxTextTile(
          align: WxTextAlign.center,
          title: Text('Text'),
          subtitle: Text('Info'),
        ),
      ),
    ),
  ],
)

完整示例

以下是一个完整的示例，展示了如何在一个 Flutter 应用中使用 wx_sheet 插件。

import 'package:flutter/material.dart';
import 'package:wx_sheet/wx_sheet.dart';
import 'package:wx_text/wx_text.dart';
import 'package:theme_patrol/theme_patrol.dart';
import 'theme_picker.dart';
import 'sample_scaffold.dart';
import 'sample_basic.dart';
import 'sample_clickable.dart';
import 'sample_selectable.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ThemePatrol(
      themes: {
        'm2': ThemeConfig.withMode(
          description: 'Material 2',
          light: ThemeData.light(useMaterial3: false),
          dark: ThemeData.dark(useMaterial3: false),
          extensionsBuilder: [
            (context) => WxStaticSheetThemeM2(context),
            (context) => WxTapSheetThemeM2(context),
            (context) => WxToggleSheetThemeM2(context),
          ],
        ),
        'm3': ThemeConfig.withMode(
          description: 'Material 3',
          light: ThemeData.light(useMaterial3: true),
          dark: ThemeData.dark(useMaterial3: true),
          extensionsBuilder: [
            (context) => WxStaticSheetThemeM3(context),
            (context) => WxTapSheetThemeM3(context),
            (context) => WxToggleSheetThemeM3(context),
          ],
        ),
        'ios': ThemeConfig.withMode(
          description: 'IOS',
          light: ThemeData.light(useMaterial3: false),
          dark: ThemeData.dark(useMaterial3: false),
          extensionsBuilder: [
            (context) => WxStaticSheetThemeIOS(context),
            (context) => WxTapSheetThemeIOS(context),
            (context) => WxToggleSheetThemeIOS(context),
          ],
        ),
      },
      initialTheme: 'm3',
      builder: (context, theme, child) {
        return MaterialApp(
          title: 'WxSheet Demo',
          theme: theme.lightData,
          darkTheme: theme.darkData,
          themeMode: theme.mode,
          home: const MyHomePage(),
          builder: theme.bootstrap(),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _pageKey = 'basic';

  void _setPage(String val) {
    setState(() {
      _pageKey = val;
    });
  }

  Widget get _page {
    switch (_pageKey) {
      case 'clickable':
        return const KeyedSubtree(
          key: ValueKey('clickable'),
          child: SampleClickable(),
        );
      case 'selectable':
        return const KeyedSubtree(
          key: ValueKey('selectable'),
          child: SampleSelectable(),
        );
      default:
        return const KeyedSubtree(
          key: ValueKey('basic'),
          child: SampleBasic(),
        );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SampleList(
      children: [
        const SizedBox(height: 40),
        const WxText.displayMedium(
          'WxSheet',
          gradient: LinearGradient(
            colors: [
              Colors.green,
              Colors.blue,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          fontWeight: FontWeight.bold,
          letterSpacing: -2,
        ),
        const SizedBox(height: 10),
        const ThemePicker(),
        const SizedBox(height: 20),
        SegmentedButton(
          showSelectedIcon: false,
          style: SegmentedButton.styleFrom(
            textStyle: Theme.of(context).textTheme.labelLarge,
            selectedBackgroundColor: Colors.blue.shade200,
            selectedForegroundColor: Colors.black87,
            side: BorderSide(color: Colors.blue.shade200),
            minimumSize: const Size.fromHeight(40.0),
          ),
          segments: const [
            ButtonSegment(
              value: 'basic',
              label: Text('Basic'),
            ),
            ButtonSegment(
              value: 'clickable',
              label: Text('Clickable'),
            ),
            ButtonSegment(
              value: 'selectable',
              label: Text('Selectable'),
            ),
          ],
          selected: {_pageKey},
          onSelectionChanged: (state) => _setPage(state.first),
        ),
        const SizedBox(height: 40),
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 250),
          child: _page,
        ),
        const SizedBox(height: 40),
      ],
    );
  }
}

更多关于Flutter底部操作表插件wx_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•3 天前

更多关于Flutter底部操作表插件wx_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用wx_sheet插件来实现底部操作表的示例代码。wx_sheet是一个流行的Flutter插件，用于在底部显示一个类似iOS的操作表（Action Sheet）。

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

dependencies:
  flutter:
    sdk: flutter
  wx_sheet: ^latest_version  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以使用WXSheet来创建一个底部操作表。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void showBottomSheet() {
    WXSheet.bottomSheet(
      context: context,
      builder: (context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.star),
              title: Text('Option 1'),
              onTap: () {
                WXSheet.dismiss(context);
                // 处理选项1的点击事件
                print('Option 1 tapped');
              },
            ),
            ListTile(
              leading: Icon(Icons.share),
              title: Text('Option 2'),
              onTap: () {
                WXSheet.dismiss(context);
                // 处理选项2的点击事件
                print('Option 2 tapped');
              },
            ),
            ListTile(
              leading: Icon(Icons.delete),
              title: Text('Option 3'),
              onTap: () {
                WXSheet.dismiss(context);
                // 处理选项3的点击事件
                print('Option 3 tapped');
              },
            ),
            ListTile(
              leading: Icon(Icons.cancel),
              title: Text('Cancel'),
              onTap: () {
                WXSheet.dismiss(context);
                // 处理取消按钮的点击事件
                print('Cancel tapped');
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: showBottomSheet,
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。点击按钮时，将显示一个底部操作表，包含三个选项和一个取消按钮。每个选项和取消按钮的点击事件都会打印到控制台，并关闭底部操作表。

这个示例展示了如何在Flutter中使用wx_sheet插件来创建和显示一个底部操作表。你可以根据自己的需求自定义操作表的内容和行为。