Flutter自定义组件插件zezis_widget的使用

Zezis Widget - 版本 0.3.12+1

信息

zezis_widget 是一个用于以定制方式创建功能/小部件/警告/对话的库，并且具有轻松依赖管理的功能。

资源

版本 3.0.0

语言: Dart

版本 3.0.0

包: Pub.dev

空安全 | Dart 3.0 | Flutter 3.0

MIT许可证

示例代码

`main.dart`

// ignore_for_file: depend_on_referenced_packages
import 'package:example/ui/drag_and_drop_page.dart';
import 'package:example/ui/input_page.dart';
import 'package:example/ui/date_time_page.dart';
import 'package:flutter/material.dart';
import 'package:zezis_widget/z_button/z_button.dart';
import 'package:zezis_widget/z_button/z_button_icon.dart';

import 'ui/divider_page.dart';
import 'ui/loading_page.dart';
import 'ui/notification_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        primaryColor: Colors.blueAccent,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Zezis Widget"),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),

      body: FocusScope(
        child: FocusTraversalGroup(
          policy: OrderedTraversalPolicy(),

          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                FocusTraversalOrder(
                  order: const NumericFocusOrder(1.0),

                  child: ZButton(
                    width: 145,
                    label: "Divider",
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const DividerPage())),
                  ),
                ),

                FocusTraversalOrder(
                  order: const NumericFocusOrder(2.0),

                  child: ZButton(
                    width: 145,
                    label: "Loading",
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const LoadingPage())),
                  ),
                ),
          
                FocusTraversalOrder(
                  order: const NumericFocusOrder(3.0),

                  child: ZButton(
                    width: 145,
                    label: "Notification",
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const NotificationPage())),
                  ),
                ),
              
                FocusTraversalOrder(
                  order: const NumericFocusOrder(4.0),

                  child: ZButton(
                    width: 145,
                    label: "Date Time",
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const DateTimePage())),
                  ),
                ),
          
                FocusTraversalOrder(
                  order: const NumericFocusOrder(5.0),

                  child: ZButton(
                    width: 145,
                    label: "Input",
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const InputPage())),
                  ),
                ),
          
                FocusTraversalOrder(
                  order: const NumericFocusOrder(6.0),

                  child: ZButtonIcon(
                    width: 145,
                    label: "Whatsapp", 
                    icon: Icons.whatshot,
                  
                    onTap: () {},
                  ),
                ),

                FocusTraversalOrder(
                  order: const NumericFocusOrder(7.0),

                  child: ZButtonIcon(
                    width: 145,
                    label: "Drag And Drop", 
                    icon: Icons.drag_handle_rounded,
                    onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => const DragAndDropPage())),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义组件插件zezis_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•3 天前

更多关于Flutter自定义组件插件zezis_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用自定义组件插件zezis_widget的示例代码。假设zezis_widget是一个已经发布在pub.dev上的Flutter包，并且它包含了一些自定义的组件。

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

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

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

接下来，让我们假设zezis_widget包中包含了一个名为CustomButton的自定义按钮组件。以下是如何在你的Flutter应用中使用这个组件的示例代码：

import 'package:flutter/material.dart';
import 'package:zezis_widget/zezis_widget.dart';  // 导入zezis_widget包

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('zezis_widget Demo'),
      ),
      body: Center(
        child: CustomButtonExample(),
      ),
    );
  }
}

class CustomButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用zezis_widget包中的CustomButton组件
        CustomButton(
          onPressed: () {
            // 按钮点击事件处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('CustomButton clicked!')),
            );
          },
          child: Text('Click Me'),
          // 假设CustomButton组件有以下属性
          color: Colors.blue,
          textColor: Colors.white,
          borderRadius: BorderRadius.circular(18.0),
        ),
        SizedBox(height: 20),
        // 你可以继续添加更多的组件或逻辑
      ],
    );
  }
}

请注意：

上述代码中的CustomButton组件及其属性（如color, textColor, borderRadius）是假设的。实际使用时，你需要参考zezis_widget包的文档来了解其组件的具体属性和用法。
ScaffoldMessenger.of(context).showSnackBar(...)用于显示SnackBar，当按钮被点击时显示一个消息。

在实际开发中，务必查阅zezis_widget包的官方文档或README文件，了解所有可用组件及其属性，以便正确和高效地使用这些组件。