Flutter自定义UI组件插件semi_widget的使用

Semi Design Widgets for Flutter 是一个为 Flutter 提供自定义 UI 组件的插件。通过该插件，开发者可以快速构建具有统一设计风格的应用程序界面。

安装与配置

1. 添加依赖

在项目的pubspec.yaml文件中添加 semi_widget依赖：

dependencies:
  semi_widget: ^1.0.0 # 替换为最新版本号

然后运行以下命令以更新依赖：

flutter pub get

使用示例

以下是使用 semi_widget 插件构建一个简单页面的完整示例代码：

2. 导入必要的包

首先，在需要使用 semi_widget 的文件中导入包：

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

3. 创建一个简单的页面

接下来，创建一个包含 SemiButton 和 SemiTextField 的页面：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Semi Widget 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SemiWidgetExamplePage(),
    );
  }
}

class SemiWidgetExamplePage extends StatefulWidget {
  [@override](/user/override)
  _SemiWidgetExamplePageState createState() => _SemiWidgetExamplePageState();
}

class _SemiWidgetExamplePageState extends State<SemiWidgetExamplePage> {
  final TextEditingController _textController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Semi Widget 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 SemiTextField
            SemiTextField(
              controller: _textController,
              hintText: '请输入文本',
              labelText: '输入框',
              prefixIcon: Icon(Icons.person), // 前置图标
              suffixIcon: Icon(Icons.clear), // 后置图标
            ),

            SizedBox(height: 20),

            // 使用 SemiButton
            SemiButton(
              text: '提交',
              onPressed: () {
                print('提交的文本: ${_textController.text}');
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


semi_widget 是一个用于 Flutter 的自定义 UI 组件插件，它提供了一些半成品（Semi-finished）的 UI 组件，帮助开发者快速构建复杂的用户界面。这些组件通常是一些常见的 UI 元素，如按钮、卡片、对话框等，但它们可能具有一些自定义的样式或行为，使得开发者可以更灵活地使用它们。

安装 semi_widget

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

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

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

使用 semi_widget 组件

semi_widget 提供了多种自定义组件，以下是一些常见组件的使用示例：

1. 自定义按钮 SemiButton

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SemiWidget Example'),
      ),
      body: Center(
        child: SemiButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
          color: Colors.blue,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

2. 自定义卡片 SemiCard

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SemiWidget Example'),
      ),
      body: Center(
        child: SemiCard(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('This is a custom card widget.'),
          ),
          elevation: 5.0,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

3. 自定义对话框 SemiDialog

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SemiWidget Example'),
      ),
      body: Center(
        child: SemiButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return SemiDialog(
                  title: 'Alert',
                  content: 'This is a custom dialog widget.',
                  actions: [
                    SemiButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      text: 'OK',
                    ),
                  ],
                );
              },
            );
          },
          text: 'Show Dialog',
        ),
      ),
    );
  }
}
回到顶部