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

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

ud_widgets 是一个Flutter包，它包含了一系列简化后的组件，旨在让应用开发更加简单快捷。这些组件基于标准的Flutter组件进行了定制，以便于在项目中直接使用。

组件列表

• UdText: 文本显示组件。
• UdShape: 形状组件。
• UdCard: 卡片组件。
• UdSvgImage: SVG图像组件。
• UdAssetImage: 资源图像组件。
• UdNetworkImage: 网络图像组件。
• UdByteImage: 字节图像组件。
• UdBase64Image: Base64编码的图像组件。
• UdBasicButton: 基础按钮组件。
• UdTextButton: 文本按钮组件。
• UdImageButton: 图像按钮组件。
• UdIconButton: 图标按钮组件。
• UdSvgButton: SVG按钮组件。
• UdRadioButton: 单选按钮组件。
• UdBasicTextInputField: 基础文本输入框组件。
• UdStraightLine: 直线组件。
• UdRadiusClip: 圆角裁剪组件。
• UdAlertWidget: 弹出框组件。
• udAlertFunction: 弹出框函数。
• UdGapX: X方向间距组件。
• UdGapY: Y方向间距组件。
• UdTapper: 触摸响应组件。
• UdAppBar: 应用栏组件。
• UdScaffold: 架构组件。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用ud_widgets。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ud_widgets',
      home: UdWidgetsDemo(),
    );
  }
}

class UdWidgetsDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return UdScaffold(
      backgroundColor: Colors.white,
      appBar: UdAppBar(
        context: context,
        titleText: "AppBar",
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              UdGapY(value: 20), // 20像素的垂直间距
              UdText(text: "Text"), // 显示文本
              UdGapY(value: 30), // 30像素的垂直间距
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  UdShape(
                    size: 50, // 形状大小为50
                    child: UdText(text: 'Shape', color: Colors.white), // 显示文本
                  ),
                  UdGapX(value: 20), // 20像素的水平间距
                  UdShape(
                    size: 50, // 形状大小为50
                    radius: 4, // 圆角半径为4
                    child: UdText(text: 'Shape', color: Colors.white), // 显示文本
                  ),
                ],
              ),
              UdGapY(value: 30), // 30像素的垂直间距
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  UdRadioButton(title: "Radio Button"), // 单选按钮
                  UdGapX(value: 20), // 20像素的水平间距
                  UdRadioButton(title: "Radio Button", borderRadius: 2), // 带圆角的单选按钮
                ],
              ),
              UdGapY(value: 30), // 30像素的垂直间距
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  UdAssetImage(
                    imagePath: "assets/nature.jpg", // 资源路径
                    width: 100, // 宽度为100
                    height: 100, // 高度为100
                    borderRadius: 50, // 圆角半径为50
                  ),
                  UdGapX(value: 20), // 20像素的水平间距
                  UdTapper(
                    onTap: () {}, // 触摸回调
                    child: UdNetworkImage(
                      width: 100, // 宽度为100
                      height: 100, // 高度为100
                      httpPath: "https://googleflutter.com/sample_image.jpg", // 网络路径
                    ),
                  ),
                ],
              ),
              UdGapY(value: 30), // 30像素的垂直间距
              UdCard(
                width: 315, // 宽度为315
                borderRadius: 4, // 圆角半径为4
                backgroundColor: Color(0xff0077d7), // 背景颜色
                child: Align(
                  alignment: Alignment.center,
                  child: Column(
                    children: [
                      UdText(
                        text: "Card", // 显示文本
                        fontSize: 20, // 字体大小为20
                        color: Colors.white, // 文本颜色为白色
                      ),
                      UdGapY(value: 20), // 20像素的垂直间距
                      UdBasicTextInputField(
                        width: double.infinity, // 宽度为无穷大
                        hintText: "Text Input Field", // 提示文字
                        textAlignment: TextAlign.start, // 文本对齐方式
                        leftItem: Icon(
                          Icons.person, // 图标
                          size: 20, // 图标大小
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              UdGapY(value: 30), // 30像素的垂直间距
              UdBasicButton(
                title: "Button", // 按钮标题
                width: 315, // 宽度为315
                borderRadius: 4, // 圆角半径为4
                onTap: () {
                  udAlertFunction(
                    context: context, // 当前上下文
                    title: "Hello", // 对话框标题
                    message: "This is a dialog message!", // 对话框消息
                    button1Text: "Ok", // 按钮1文字
                    button1Function: () {
                      print("Dialog button 1 pressed"); // 按钮1点击回调
                    },
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}