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

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

wired_elements

Wired Elements 是一系列具有手绘风格的基本UI元素。这些元素可以用于线框图、原型设计或仅仅是有趣的手绘风格。它是 <a href="https://github.com/rough-stuff/wired-elements" rel="ugc">wired-elements</a> 的 Flutter 实现版本，基于 <a href="https://github.com/sergiandreplace/flutter_rough" rel="ugc">flutter_rough</a> 库。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  wired_elements: <latest_version>

基本用法

对于更多的用法，请查看 <a href="https://github.com/KevinZhang19870314/wired_elements/blob/main/example/lib/demos.dart" rel="ugc">例子</a>。

示例

以下是 wired_elements 插件的一些截图：

其他信息

<a href="https://github.com/sergiandreplace/flutter_rough" rel="ugc">flutter_rough</a> 是一个很棒的库，但它还不支持空安全（null safety）。有一个 <a href="https://github.com/sergiandreplace/flutter_rough/issues/5" rel="ugc">问题</a> 相关于此，但至今未得到回应。因此，我不得不将所有代码复制到项目中并自行实现空安全。只要 <a href="https://github.com/sergiandreplace/flutter_rough" rel="ugc">flutter_rough</a> 的作者完成了空安全工作，我就会使用该库作为依赖项，而不是复制所有源代码。

欢迎提交 PR！

完整示例代码

下面是一个完整的示例代码，展示了如何使用 wired_elements 插件来创建一个简单的应用。

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

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

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

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

class _HomePageState extends State<HomePage> {
  bool isChecked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wired Elements Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            WiredButton(
              text: '点击我',
              onPressed: () {
                print('按钮被点击了');
              },
            ),
            SizedBox(height: 20),
            WiredCard(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('这是一个手绘风格的卡片'),
              ),
            ),
            SizedBox(height: 20),
            WiredCheckbox(
              value: isChecked,
              onChanged: (bool? newValue) {
                setState(() {
                  isChecked = newValue!;
                });
              },
            ),
            SizedBox(height: 20),
            WiredInput(
              placeholder: '输入文字',
              onChanged: (String value) {
                print('输入的文字: $value');
              },
            ),
            SizedBox(height: 20),
            WiredSlider(
              value: 0.5,
              onChanged: (double newValue) {
                print('滑块值: $newValue');
              },
            ),
          ],
        ),
      ),
    );
  }
}