Flutter UI组件插件zog_ui的功能使用

Flutter UI组件插件zog_ui的功能使用

这是由Zero One Group开发的组件小部件集合。

特性

此包由组件和主题扩展组成。

组件

表单

  • ZeroTextfield
  • ZeroDropdown
  • ZeroRadioGroup
  • ZeroDropdownButton
  • ZeroDropdownMenu
  • ZeroCheckbox
  • ZeroSwitch
  • ZeroSlider

按钮

  • ZeroButton
  • ZeroButtonGroup

导航

  • ZeroNavigationBar
  • ZeroNavigationDrawer
  • ZeroAppBar
  • ZeroNavigationRail
  • ZeroTabBar

主题

  • ZeroTheme
  • ZeroThemeData

基础

颜色

  • Colors

字体

  • Typography

表单

  • ZeroTextfield
  • ZeroButton
  • ZeroButtonGroup
  • ZeroDropdown

如需了解可用组件的更多信息，请参阅：https://zero-ui-mobile.web.app/#/

使用方法

添加依赖

在安装之前，请检查最新版本。如果新版本存在问题，请使用旧版本。

dependencies:
  flutter:
    sdk: flutter
  zog_ui: ^{最新版本}

导入包

在您的Dart代码中添加以下导入。第一个需要导入的文件是包含MaterialApp的文件。

import 'package:zog_ui/zog_ui.dart';

使用ZeroApp

将您的MaterialApp替换为ZeroApp。否则它将无法正常工作。在此处完全支持所有内置的Flutter小部件。

示例代码

以下是完整的示例代码，展示如何使用zog_ui组件。

示例代码：main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:zog_ui/zog_ui.dart';

// 引入各个组件的示例页面
import 'component/accordion/zero_accordion_example.dart';
import 'component/alert_dialog/zero_alert_dialog_example.dart';
import 'component/avatar/avatar_example.dart';
import 'component/bottom_sheet/bottom_sheet_example.dart';
import 'component/button/button_group_example.dart';
import 'component/button/zero_button_example.dart';
import 'component/card/zero_card_example.dart';
import 'component/checkbox/checkbox_example.dart';
import 'component/chip/chip_example.dart';
import 'component/datepicker/datepicker_example.dart';
import 'component/divider/divider_example.dart';
import 'component/dropdown/zero_dropdown_example.dart';
import 'component/dropdown/zero_dropdown_menu_example.dart';
import 'component/grid/zero_grid_example.dart';
import 'component/icon/icon_example.dart';
import 'component/listtile/listile_example.dart';
import 'component/navigation/app_bar_example.dart';
import 'component/navigation/navigation_bar_example.dart';
import 'component/navigation/navigation_drawer_example.dart';
import 'component/navigation/navigation_rail_example.dart';
import 'component/navigation/tabs_example.dart';
import 'component/progress_indicator/zero_progress_indicator_example.dart';
import 'component/radio/radio_example.dart';
import 'component/rating/zero_rating_example.dart';
import 'component/skeleton/zero_skeleton_example.dart';
import 'component/slider/zero_slider_example.dart';
import 'component/snackbar/zero_snackbar_example.dart';
import 'component/speed_dial/zero_speed_dial_example.dart';
import 'component/stepper/zero_stepper_example.dart';
import 'component/switch/zero_switch_example.dart';
import 'component/textfield/zero_textfield_example.dart';
import 'component/timepicker/zero_timepicker_example.dart';
import 'component/tooltip/zero_tooltip_example.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _searchController = TextEditingController();
  final _initialData = examplesData.entries;
  final List<MapEntry<String, Widget>> _searchData = [];
  InputDecorationType _defaultDecorationType = InputDecorationType.outline;

  final _colors = [
    ZeroColors.lime,
    ZeroColors.primary,
    ZeroColors.geekBlue,
    ZeroColors.dustRed,
    ZeroColors.magenta,
    ZeroColors.polarGreen,
  ];

  ShadedColor _selectedColor = ZeroColors.primary;
  bool _customFont = false;
  bool _dark = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ZeroApp(
      title: 'Flutter Demo',
      theme: ZeroThemeData(
          fontFamily:
              _customFont ? GoogleFonts.dancingScript().fontFamily : null,
          brightness: _dark ? Brightness.dark : Brightness.light,
          primaryColor: _selectedColor.toAccentColor(),
          textfieldStyleSet: ZeroTextfieldStyleSet.fallback(
              textfieldSize: ZeroTextfieldSize.small,
              defaultDecorationType: _defaultDecorationType,
              focusedBorderColor: _selectedColor,
              focusedColor: _selectedColor)),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    const Text('自定义字体'),
                    Flexible(
                      fit: FlexFit.tight,
                      flex: 1,
                      child: ZeroCheckbox(
                        value: _customFont,
                        onChanged: (value) {
                          setState(() {
                            _customFont = value ?? false;
                          });
                        },
                      ),
                    ),
                    const Text('深色模式'),
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: ZeroCheckbox(
                        value: _dark,
                        onChanged: (value) {
                          setState(() {
                            _dark = value ?? false;
                          });
                        },
                      ),
                    )
                  ],
                ),
              ),
              const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: ZeroDivider.horizontal(
                    style: ZeroDividerStyle(size: 2),
                  )),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text('主颜色'),
                          const SizedBox(
                            height: 4,
                          ),
                          ZeroDropdownButtonFormField<ShadedColor>(
                            hint: Row(
                              children: [
                                const Text('主颜色'),
                                const SizedBox(width: 10),
                                Container(
                                  width: 20,
                                  height: 20,
                                  color: _selectedColor,
                                )
                              ],
                            ),
                            value: _selectedColor,
                            items: _colors
                                .map((e) => ZeroDropdownMenuItem<ShadedColor>(
                                      value: e,
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 16.0),
                                        child: Row(
                                          children: [
                                            Text(e.toHex()),
                                            const SizedBox(width: 10),
                                            Container(
                                              width: 20,
                                              height: 20,
                                              color: e,
                                            )
                                          ],
                                        ),
                                      ),
                                    ))
                                .toList(),
                            onChanged: (value) {
                              if (value == null) return;

                              setState(() {
                                _selectedColor = value;
                              });
                            },
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      width: 8,
                    ),
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text('默认输入框装饰'),
                          const SizedBox(
                            height: 4,
                          ),
                          ZeroDropdownButtonFormField<InputDecorationType>(
                            hint: const Text('默认输入框装饰'),
                            items: InputDecorationType.values
                                .map((e) =>
                                    ZeroDropdownMenuItem<InputDecorationType>(
                                      value: e,
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 16.0),
                                        child: Text(e.name),
                                      ),
                                    ))
                                .toList(),
                            value: _defaultDecorationType,
                            onChanged: (value) {
                              if (value == null) return;

                              setState(() {
                                _defaultDecorationType = value;
                              });
                            },
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16),
                child: ZeroTextField(
                  hintText: '搜索组件',
                  controller: _searchController,
                  decoration: const InputDecoration(filled: true),
                  onChanged: (v) {
                    _search(v);
                  },
                ),
              ),
              Expanded(
                child: Examples(
                  data: _searchController.text.isEmpty
                      ? _initialData
                      : _searchData,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _search(String query) {
    final result = <MapEntry<String, Widget>>[];

    for (final item in _initialData) {
      if (item.key.toLowerCase().contains(query.toLowerCase().trim())) {
        result.add(item);
      }
    }

    setState(() {
      _searchData.clear();
      _searchData.addAll(result);
    });
  }

  [@override](/user/override)
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

class Examples extends StatelessWidget {
  const Examples({super.key, required this.data});

  final Iterable<MapEntry<String, Widget>> data;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
      itemCount: data.length,
      itemBuilder: (context, index) => ZeroButton.primary(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => data.elementAt(index).value,
            ),
          );
        },
        child: Text(data.elementAt(index).key),
      ),
      separatorBuilder: (_, __) => const SizedBox(height: 12),
    );
  }
}

final examplesData = {
  '零复选框示例': const ZeroCheckboxExample(),
  '零单选按钮示例': const ZeroRadioExample(),
  '零按钮示例': const ZeroButtonExample(),
  '零文本框示例': const ZeroTextfieldExample(),
  '零下拉菜单示例': ZeroDropdownExample(),
  '零下拉菜单项示例': ZeroDropdownMenuExample(),
  '零评分示例': const ZeroRatingExample(),
  '零滑块示例': const ZeroSliderExample(),
  '零工具提示示例': const ZeroTooltipExample(),
  '零头像示例': const ZeroAvatarExample(),
  '零分隔线示例': const ZeroDividerExample(),
  '零列表项示例': const ZeroListTileExample(),
  '零芯片示例': const ZeroChipExample(),
  '零开关示例': const ZeroSwitchExample(),
  '零进度指示器示例': const ZeroProgressIndicatorExample(),
  '零图标示例': const ZeroIconExample(),
  '零显示消息示例': const ZeroSnackbarExample(),
  '零底部导航栏示例': const ZeroNavigationBarExample(),
  '零日期选择器示例': const ZeroDatePickerExample(),
  '零对话框示例': const ZeroAlertDialogExample(),
  '零抽屉导航示例': const ZeroNavigationDrawerExample(),
  '零时间选择器示例': const ZeroTimePickerExample(),
  '零应用栏示例': const ZeroAppBarExample(),
  '零卡片示例': const ZeroCardExample(),
  '零步骤指示器示例': const ZeroStepperExample(),
  '零导航横栏示例': const ZeroNavigationRailExample(),
  '零标签页示例': const ZeroTabsExample(),
  '零速拨盘示例': const ZeroSpeedDialExample(),
  '零网格示例': const ZeroGridExample(),
  '零按钮组示例': const ZeroButtonGroupExample(),
  '零骨架屏示例': const ZeroSkeletonExample(),
  '零折叠面板示例': const ZeroAccordionExample(),
  '零底部弹出框示例': const ZeroBottomSheetExample(),
};

更多关于Flutter UI组件插件zog_ui的功能使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


zog_ui 是一个用于 Flutter 的 UI 组件库，旨在提供一套美观且易于使用的组件，帮助开发者快速构建高质量的 Flutter 应用。以下是 zog_ui 的一些核心功能和使用方法：

1. 安装 zog_ui

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

dependencies:
  flutter:
    sdk: flutter
  zog_ui: ^0.1.0  # 请根据最新版本号进行替换

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

2. 基本使用

在你的 Dart 文件中导入 zog_ui：

import 'package:zog_ui/zog_ui.dart';

3. 核心组件

zog_ui 提供了多种常用组件，以下是其中一些核心组件的使用方法：

3.1 按钮 (ZeroButton)

ZeroButton 是一个可定制的按钮组件。

ZeroButton(
  onPressed: () {
    print('Button Pressed!');
  },
  child: Text('Click Me'),
);

3.2 输入框 (ZeroTextField)

ZeroTextField 是一个可定制的输入框组件。

ZeroTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input changed: $value');
  },
);

3.3 卡片 (ZeroCard)

ZeroCard 是一个可定制的卡片组件。

ZeroCard(
  child: Text('This is a card'),
);

3.4 列表项 (ZeroListTile)

ZeroListTile 是一个可定制的列表项组件。

ZeroListTile(
  title: Text('List Item Title'),
  subtitle: Text('List Item Subtitle'),
  onTap: () {
    print('List Item Tapped');
  },
);

3.5 对话框 (ZeroDialog)

ZeroDialog 是一个可定制的对话框组件。

ZeroDialog(
  title: Text('Dialog Title'),
  content: Text('Dialog Content'),
  actions: [
    ZeroButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('Close'),
    ),
  ],
);

4. 主题定制

zog_ui 支持自定义主题，你可以通过 ZeroTheme 来定制应用的整体样式。

MaterialApp(
  theme: ZeroTheme.light(),  // 使用默认的浅色主题
  darkTheme: ZeroTheme.dark(),  // 使用默认的深色主题
  home: MyHomePage(),
);

你也可以通过 ZeroThemeData 来自定义主题：

MaterialApp(
  theme: ZeroThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
    // 其他自定义样式
  ),
  home: MyHomePage(),
);

5. 响应式设计

zog_ui 提供了响应式设计支持，你可以使用 ZeroResponsive 来根据屏幕大小调整布局。

ZeroResponsive(
  mobile: Text('Mobile Layout'),
  tablet: Text('Tablet Layout'),
  desktop: Text('Desktop Layout'),
);
回到顶部