Flutter UI组件插件one

Flutter UI组件插件one_ui的使用

one_ui 是一个非官方实现的三星One UI风格的Flutter组件库。

资源

组件

底部导航栏

one_ui 提供了一个One UI风格的底部导航栏。

Scaffold(
  bottomNavigationBar: OneUIBottomNavigationBar(
    currentIndex: _index,
    onTap: (value) {
      setState(() {
        _index = value;
      });
    },
  ),
)

按钮

返回按钮

带有返回图标的按钮。

OneUIBackButton()

包含按钮

One UI风格的包含按钮。

OneUIContainedButton(
  onPressed: () {},
  child: Text("包含按钮"),
)

平面按钮

One UI风格的平面按钮。

OneUIFlatButton(
  onPressed: () {},
  child: Text("平面按钮"),
)

图标按钮

One UI风格的图标按钮。

OneUIIconButton(
  onPressed: () {},
  icon: Icon(Icons.home),
)

对话框

One UI风格的对话框。

ListTile(
  title: Text("显示对话框"),
  onTap: () {
    showOneUIDialog(
      context: context,
      builder: (context) {
        return OneUIAlertDialog(
          title: Text("标题"),
          content: Text("这是一个演示对话框。"),
          actions: [
            OneUIDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("取消"),
            ),
            OneUIDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("确定"),
            ),
          ],
        );
      },
    );
  },
)

弹出菜单

One UI风格的弹出菜单按钮。

OneUIPopupMenuButton(
  itemBuilder: (context) => [
    const OneUIPopupMenuItem(child: Text('选项1')),
    const OneUIPopupMenuItem(child: Text('选项2')),
    const OneUIPopupMenuItem(child: Text('选项3')),
  ],
),

开关

One UI风格的开关。

OneUISwitch(
  value: _value,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)

滑块

One UI风格的滑块。

OneUISlider(
  value: _value,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)

视图

One UI风格的滚动视图。

[@override](/user/override)
Widget build(BuildContext context) {
  return OneUIView(
    title: Text("标题"),
    actions: [
      OneUIPopupMenuButton(
        itemBuilder: (context) => [
          const OneUIPopupMenuItem(child: Text('选项1')),
          const OneUIPopupMenuItem(child: Text('选项2')),
          const OneUIPopupMenuItem(child: Text('选项3')),
        ],
      ),
    ],
    child: body,
  );
}

示例代码

以下是完整的示例代码，展示了如何使用 one_ui 插件来构建一个具有多个页面的应用程序。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'One UI 示例',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Widget> _widgetOption = [
      OneUIView(
        title: Text('One UI 示例'),
        actions: [
          OneUIPopupMenuButton(
            itemBuilder: (context) => [
              const OneUIPopupMenuItem(child: Text('选项1')),
              const OneUIPopupMenuItem(child: Text('选项2')),
              const OneUIPopupMenuItem(child: Text('选项3')),
            ],
          ),
        ],
        child: ListView(
          children: [
            ListTile(
              onTap: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const ButtonPage(),
                ),
              ),
              title: const Text('按钮'),
            ),
            ListTile(
              onTap: () => showOneUIDialog(
                context: context,
                builder: (context) {
                  return OneUIAlertDialog(
                    title: const Text("标题"),
                    content: const Text("这是一个演示对话框。"),
                    actions: [
                      OneUIDialogAction(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: const Text("取消"),
                      ),
                      OneUIDialogAction(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text("确定")),
                    ],
                  );
                },
              ),
              title: const Text('对话框'),
            ),
            ListTile(
              onTap: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const SwitchPage(),
                ),
              ),
              title: const Text('开关'),
            ),
            ListTile(
              onTap: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const SliderPage(),
                ),
              ),
              title: const Text('滑块'),
            ),
          ],
        ),
      ),
      OneUIView(
        title: Text('One UI 示例'),
        actions: [
          OneUIPopupMenuButton(
            itemBuilder: (context) => [
              const OneUIPopupMenuItem(child: Text('选项1')),
              const OneUIPopupMenuItem(child: Text('选项2')),
              const OneUIPopupMenuItem(child: Text('选项3')),
            ],
          ),
        ],
        slivers: [
          const SliverFillRemaining(
            child: Center(child: Text('第二页')),
          ),
        ],
      ),
    ];

    return Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
          children: _widgetOption,
        ),
        bottomNavigationBar: OneUIBottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: (value) {
            setState(() {
              _selectedIndex = value;
            });
          },
          items: const [
            OneUIBottomNavigationBarItem(label: "首页"),
            OneUIBottomNavigationBarItem(label: "更多"),
          ],
        ));
  }
}

class ButtonPage extends StatelessWidget {
  const ButtonPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: OneUIView(
        title: const Text('按钮'),
        slivers: [
          SliverFillRemaining(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                OneUIContainedButton(
                  onPressed: () {},
                  child: const Text('包含按钮'),
                ),
                OneUIFlatButton(
                  onPressed: () {},
                  child: const Text('平面按钮'),
                ),
                OneUIIconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.home),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class SwitchPage extends StatefulWidget {
  const SwitchPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _SwitchPageState createState() => _SwitchPageState();
}

class _SwitchPageState extends State<SwitchPage> {
  bool _value = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: OneUIView(
        title: const Text('开关'),
        slivers: [
          SliverFillRemaining(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('启用'),
                    OneUISwitch(
                      value: _value,
                      onChanged: (value) {
                        setState(() {
                          _value = value;
                        });
                      },
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('禁用'),
                    OneUISwitch(
                      value: _value,
                      onChanged: null,
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class SliderPage extends StatefulWidget {
  const SliderPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _SliderPageState createState() => _SliderPageState();
}

class _SliderPageState extends State<SliderPage> {
  double _value1 = .0;
  double _value2 = .0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: OneUIView(
        title: const Text('滑块'),
        slivers: [
          SliverFillRemaining(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                OneUISlider(
                  value: _value1,
                  onChanged: (value) {
                    setState(() {
                      _value1 = value;
                    });
                  },
                ),
                const Text('连续'),
                const SizedBox(height: 50),
                OneUISlider(
                  value: _value2,
                  divisions: 3,
                  onChanged: (value) {
                    setState(() {
                      _value2 = value;
                    });
                  },
                ),
                const Text('离散'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

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

h691938207 1楼

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

one_ui 是一个 Flutter 插件，旨在提供一组预定义的 UI 组件和主题，以帮助开发者快速构建美观且一致的应用程序界面。使用 one_ui 可以节省开发时间，尤其是在需要遵循特定设计规范或品牌指南时。

以下是如何在 Flutter 项目中使用 one_ui 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 one_ui 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  one_ui: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 one_ui 包。

import 'package:one_ui/one_ui.dart';

3. 使用 `OneUI` 主题

one_ui 提供了一个预定义的主题，你可以直接在 MaterialApp 中使用它。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OneUI Example',
      theme: OneUITheme.lightTheme,  // 使用 OneUI 的浅色主题
      darkTheme: OneUITheme.darkTheme,  // 使用 OneUI 的深色主题
      home: MyHomePage(),
    );
  }
}

4. 使用 `OneUI` 组件

one_ui 提供了一系列预定义的组件，你可以直接在应用中使用。以下是一些常见的组件示例：

按钮

OneUIPrimaryButton(
  onPressed: () {
    print('Primary Button Pressed');
  },
  text: 'Primary Button',
);

文本输入框

OneUITextField(
  hintText: 'Enter your text',
  onChanged: (value) {
    print('Text changed: $value');
  },
);

卡片

OneUICard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card with some content.'),
    ],
  ),
);

对话框

OneUIDialog(
  title: 'Dialog Title',
  content: 'This is a dialog message.',
  actions: [
    OneUITextButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      text: 'Close',
    ),
  ],
);

5. 自定义主题

如果你需要自定义主题，可以通过扩展 OneUITheme 来实现。

final customTheme = OneUITheme.lightTheme.copyWith(
  primaryColor: Colors.blue,
  accentColor: Colors.green,
);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom OneUI Theme',
      theme: customTheme,
      home: MyHomePage(),
    );
  }
}

6. 运行应用

完成上述步骤后，你可以运行你的 Flutter 应用，并查看 one_ui 组件和主题的效果。

flutter run

Flutter UI组件插件one_ui的使用