Flutter UI组件库插件xui的使用

Flutter UI组件库插件xui的使用

Getting Started

xui 主要包含项目中常用的 HTML 元素，项目布局和 JS 方法，可作为项目模板使用。

设置尺寸

builder: (context, child) {
  return MediaQuery(
    data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    child: child!,
  );
},

设置颜色

/// 默认UI配置
static configInit() {
  /// 图片默认样式支持SVG和静态图片
  globalConfig.imgList = {
    XImageType.general: Icon(const IconData(0xe63f, fontFamily: 'iconfont')),
    XImageType.avatar: 'assets/common/avatar.png',
  };

  /// 对XButton的按钮拦截，也可以在这里做数据埋点
  XButtonInterceptor = () async {
    ApiClient.hideToast = false;
  };
}

/// 支持换肤配置
static themeColorInit() {
  globalConfig.theme = FontTextColor.theme;
  themeColor = ThemeColor(
    primary: FontTextColor.primary,
    ff3D3B48: FontTextColor.ff3D3B48,
    ff6C7480: FontTextColor.ff6C7480,
    ff9EA6AE: FontTextColor.ff9EA6AE,
    ffC1C6CB: FontTextColor.ffC1C6CB,
    ffFF4300: FontTextColor.ffFF4300,
    ffFF9538: FontTextColor.ffFF9538,
    ffFE424A: FontTextColor.ffFE424A,
    ffFFFFFF: FontTextColor.ffFFFFFF,
    ff0E1424: FontTextColor.ff0E1424,
    ff11BB70: FontTextColor.ff11BB70,
    ff4480FF: FontTextColor.ff4480FF,
    ff54C6EF: FontTextColor.ff54C6EF,
    ff846BF8: FontTextColor.ff846BF8,
    ffDEDFDE: FontTextColor.ffDEDFDE,
    ffF3F6F9: FontTextColor.ffF3F6F9,
  );
}

HTML 部分

布局

SizedBox()
  .margin(10.w) 
  .paddingAll(20.w)
  .background(color: Colors.white, width: 1216.w, height: 672.w, radius: 12.w)
// background来设置块状的背景，长宽，圆角，边框颜色宽度；不可以直接设置在Container，可以先包一个SizedBox

XButton 按钮

XButton(
  callback: () => Get.back(),
  child: Text(
    '确定',
    style: FontText.h26.copyWith(color: FontTextColor.ff333333),
  ).center.margin(right: 40.w),
)

XCheckBox 复选框或单选

// 复选框
XCheckBox(
  right: Text(
    '记住账户',
    style: font(14, color: '#000000', weight: FontWeight.w400),
  ),
  value: value,
  activeColor: '#3399FF',
  onChanged: (v) {
    setState(() {
      value = v!;
    });
  },
),

// 单选
XCheckBox(
  radio: true,  // 是否单选
  value: e['select'],
  activeImg: IconPath.login_radio_active,
  defaultImg: IconPath.login_radio_default,
  size: 42.w,
  onChanged: (v) {},
),

XDivision 分割线

XDivision(height: 1.w)

XImage 图片

XImage(
  type: XImageType.avatar,
  image: LoginService.userInfo?.driverPhotoUrl,
  width: 75.w,
  height: 75.w,
  borderRadius: 100,
)

XInput 输入框

XInput(
  controller: state.code,
  keyboardType: TextInputType.number,
  hintText: '请输入验证码',
  hintStyle: FontText.h32.copyWith(color: FontTextColor.ffCCCCCC),
  style: FontText.h32.copyWith(color: FontTextColor.ff333333),
  validator: FormKeyEnum.empty,
  contentPadding: EdgeInsets.only(top: 30.w, bottom: 30.w),
  onChanged: (v) {},
)

XSelectInput 选择框

// 1
XSelectInput(
  width: 200.w,
  initialValue: _data,
  onSelected: (c) {
    print(c);
  },
  list: data,
),

// 2
JhPickerTool.showStringPicker(
  context,
  data: messageToken!.posUserWharfModels!.map((e) => e.shipWharfName).toList(),
  title: '请选择码头',
  normalIndex: shipWharfIndex,
  clickCallBack: (int selectIndex, Object selectStr) {
    shipWharfIndex = selectIndex;
    setState(() {});
  },
)

XP 多个text拼接

XP([
  XPConfig(
    title: '预估价格：',
    style: FontText.h30.copyWith(color: FontTextColor.ff333333),
  ),
  XPConfig(
    title: '${XChangePrice(state.orderEstimatedPriceData.value.price)}',
    style: FontText.h36.copyWith(color: FontTextColor.ff333333),
  ),
  XPConfig(
    title: ' 元',
    style: FontText.h30.copyWith(color: FontTextColor.ff333333),
  ),
])

XForm 表单布局

List list = [
  {
    'name': '上车站点',
    'value': '上车站点1111',
  },
  {
    'name': '下车站点',
    'child': () => _stationListData == null
        ? Container()
        : Text('下车站点'),
  },
  {
    'name': '单价',
    'value': '￥${params.price}',
  },
  {
    'name': '数量',
    'hidden': true,
    'child': () => XComputer(
      num: params.totalTicketCount,
      onValueChanged: (int value) {
        params.totalTicketCount = value;
        setState(() {});
      },
    )
  },
];

XForm(
  child: (item, inline) => XFormItem(
    label: item['name'],
    value: item['value'],
    hidden: item['hidden'],
    align: (item['name'] == '下车站点' || item['name'] == '票型') ? CrossAxisAlignment.start : null,
    child: item.containsKey('child') ? item['child']() : null,
  ).margin(top: 16.w),
  list: list
)

XTable 表单

receptionTicketOrderList = _ticketOrderList!
  .map((e) => {
    'orderNo': e.ticketOrderNumber,
    'type': ticketsEnumString(TicketsEnum.values[e.ticketType ?? 0]),
    'onUpSite': '${e.startStationName}-${e.endStationName}',
    'people': e.totalTicketCount,
    'price': e.totalAmount,
    'orderTime': e.createTime,
    'orderState': paymentStatusEnumString(PaymentStatusEnum.values[int.parse((e.paymentStatus ?? '0')) + 1]),
    'orderFrom': orderSourceEnumString(OrderSourceEnum.values[(e.orderSource ?? 1) - 1]),
    'businessState': businessTypeEnumString(BusinessTypeEnum.values[(e.businessType ?? 1) - 1]),
    'payWay': paymentTypeEnumString(e.paymentType),
    'id': e.id,
  })
  .toList();

tableColumn = [
  TableColumn(prop: 'orderNo', label: '订单编号', width: 260.w, alignment: Alignment.centerLeft),
  TableColumn(prop: 'type', label: '票型', width: 100.w),
  TableColumn(prop: 'onUpSite', label: '上下车站点', width: 200.w, alignment: Alignment.centerLeft),
  TableColumn(prop: 'people', label: '人数', width: 40.w),
  TableColumn(prop: 'price', label: '金额', width: 100.w),
  TableColumn(prop: 'orderTime', label: '订单时间', width: 200.w, alignment: Alignment.centerLeft),
  TableColumn(prop: 'orderState', label: '订单状态', width: 100.w),
  TableColumn(prop: 'orderFrom', label: '订单来源', width: 100.w),
  TableColumn(prop: 'businessState', label: '业务状态', width: 100.w),
  TableColumn(prop: 'payWay', label: '支付方式', width: 100.w),
  TableColumn(
    prop: 'btn',
    label: '操作',
    maxLines: 3,
    widget: (i) => XButton(
      text: '详情',
      style: font(14, color: '#3399FF', weight: FontWeight.w400),
      callback: () async {
        OrderDetailGetData model = await HomeApi.ticketOrderGet({'id': _search.receptionTicketOrderList[i]['id']});
        Alert(context).orderDetail(
          model: model,
          title: '订单详情',
          callback: (v) {},
        );
      }
    )
  )
];

XTable(
  data: receptionTicketOrderList,
  onRefresh: () => onRefresh(),
  tableColumn: tableColumn!,
  config: TableConfig()
    ..style = font(24, colorA: Color.fromRGBO(0, 0, 0, 0.65), weight: FontWeight.w400)
    ..headerBackground = '#144372'
    ..headerStyle = font(26, colorA: Color.fromRGBO(0, 0, 0, 0.65), weight: FontWeight.w500),
)

XPaginatedTable 分页

XPaginatedTable(
  pageIndexKey: 'pageIndex',
  pageSizeKey: 'pageSize',
  totalNum: HomeApi.model.ticketOrderListData?.total,
  params: _search.toJson(),
  api: _search.submit,
  onChange: (data, pageIndex) {
    _search.pageIndex = pageIndex;
    setState(() {});
  }
)

XSelectDateTime 时间筛选

XSelectDateTime(
  width: 300.w,
  initialValue: _startTime,
  format: 'yyyy-MM-dd HH:mm',
  onConfirm: (c) {
    _startTime = c;
    Routers.pop();
  },
)

XCustomScrollView sliver 布局 包含 loading 上拉下拉刷新

XCustomScrollView(
  loadingWidget: const LoadingWidget(),
  emptyWidget: const EmptyWidget(status: EmptyStatus.empty),
  errorWidget: EmptyWidget(
    status: EmptyStatus.error,
    onTap: () {},
  ),
  backgroundColor: Theme.of(context).backgroundColor,
  onRefresh: () {},
  onLoading: () {},
  xAppBar: XAppBar(context, title: '模版'),
  slivers: () => [],
  status: PageStatus.success,
)

JS 部分

验证表单填写信息

List<CheckFormItem> arr = [
  CheckFormItem()
    ..required = true
    ..key = FormKeyEnum.name
    ..value = params.loginName,
  CheckFormItem()
    ..required = true
    ..key = FormKeyEnum.empty
    ..info = "请输入密码"
    ..value = params.password,
];
if (!checkAllForm(arr)) return ajax();

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

1 回复

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


xui 是一个用于 Flutter 的轻量级 UI 组件库插件，旨在帮助开发者快速构建美观且功能丰富的用户界面。它提供了一系列常用的 UI 组件，如按钮、卡片、输入框、对话框等，并且这些组件都经过了精心设计，可以轻松集成到你的 Flutter 应用中。

安装 xui

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

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

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

使用 xui 组件

以下是一些常用的 xui 组件及其使用示例。

1. 按钮 (XuiButton)

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

class MyButton extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('XuiButton Example'),
      ),
      body: Center(
        child: XuiButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

2. 卡片 (XuiCard)

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

class MyCard extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('XuiCard Example'),
      ),
      body: Center(
        child: XuiCard(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text('Card Title'),
              SizedBox(height: 10),
              Text('Card Content'),
            ],
          ),
        ),
      ),
    );
  }
}

3. 输入框 (XuiTextField)

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

class MyTextField extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('XuiTextField Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: XuiTextField(
          hintText: 'Enter your text',
          onChanged: (value) {
            print('Text changed: $value');
          },
        ),
      ),
    );
  }
}

4. 对话框 (XuiDialog)

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

class MyDialog extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('XuiDialog Example'),
      ),
      body: Center(
        child: XuiButton(
          onPressed: () {
            XuiDialog.show(
              context,
              title: 'Dialog Title',
              content: 'Dialog Content',
              actions: [
                XuiButton(
                  text: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
          text: 'Show Dialog',
        ),
      ),
    );
  }
}

自定义主题

xui 允许你自定义主题以匹配你的应用设计。你可以通过 XuiTheme 来设置全局主题。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Xui Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: XuiTheme(
        data: XuiThemeData(
          primaryColor: Colors.blue,
          accentColor: Colors.orange,
        ),
        child: MyButton(),
      ),
    );
  }
}
回到顶部