TrionesDev Antd Flutter

Appearance

Cell 单元格 ​

单元格用于展示列表项信息，通常用于设置页、表单页等需要展示和收集信息的场景。

何时使用 ​

  • 需要展示列表项信息时
  • 设置页面中展示各项配置选项
  • 表单页面中展示和收集用户信息
  • 需要点击跳转到其他页面的列表项

代码演示 ​

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

import '../demo_block.dart';

class CellPage extends StatefulWidget {
  const CellPage({super.key});

  @override
  State<StatefulWidget> createState() => _CellPageState();
}

class _CellPageState extends State<CellPage> {
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(title: const Text('Cell 单元格')),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            DemoBlock(
              title: "基本使用",
              child: AntCell(labelText: "单元格", child: Text("内容")),
            ),
            DemoBlock(
              title: "基本使用(内容居右)",
              child: AntCell(
                labelText: "单元格",
                wrapperAlign: AntAlign.right,
                child: Text("内容"),
              ),
            ),
            DemoBlock(
              title: "单元格组",
              child: AntCellGroup(
                arrow: true,
                wrapperAlign: AntAlign.right,
                children: [
                  AntCell(labelText: "单元格1", child: Text("内容1")),
                  AntCell(labelText: "单元格2", child: Text("内容2")),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API ​

AntCellGroup 组件参数 ​

属性说明类型默认值
size大小AntSize?AntSize.middle
title标题Widget?null
titleText标题文本String?null
titleAlign标题对齐AntLabelAlign?null
titleStyle样式TextStyle?null
labelCol左侧标签列AntCol?null
labelAlign左侧标签对齐AntLabelAlign?null
children子组件List<Widget>?null
showDivider是否显示分割线boolfalse
arrow是否显示箭头booltrue

AntCell 组件参数 ​

属性说明类型默认值
size大小AntSize?null
placeholder占位符Text?null
placeholderText占位符文本String?null
arrow是否显示箭头bool?true
icon图标Widget?null
label标签Widget?null
labelText标签文本String?null
labelStyle样式TextStyle?null
labelCol左侧标签列AntCol?null
labelAlign左侧标签对齐AntLabelAlign?null
value值dynamic?null
child子组件Widget?null
onTap点击回调Function?null

组件特性 ​

  1. 支持单元格组和单独单元格两种使用方式
  2. 支持自定义大小（large、middle、small）
  3. 支持自定义标签和值的展示
  4. 支持显示或隐藏箭头图标
  5. 支持自定义图标
  6. 支持点击事件处理
  7. 支持设置占位符文本
  8. 支持在组内显示分割线

使用说明 ​

  • AntCellGroup 用于包裹一组 AntCell，可以统一设置大小、标签对齐等属性
  • AntCell 用于展示单个列表项，支持标签、值、图标等元素
  • 可通过 labelCol 设置标签列的宽度和布局方式
  • 可通过 onTap 设置点击事件处理函数
  • 支持通过 value 属性直接设置显示值，或通过 child 属性自定义内容
  • 当 value 为空时，可以通过 placeholder 或 placeholderText 设置占位符