TrionesDev Antd Flutter

Appearance

Input 输入框 ​

输入框用于接收用户输入的内容。

何时使用 ​

当需要用户输入内容时使用，支持文本、密码和数字类型的输入。

代码演示 ​

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/material.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

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

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

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(title: Text('Input 输入框')),
      body: SingleChildScrollView(
        child: Column(
          spacing: 10,
          children: [
            DemoBlock(
              title: "普通使用",
              child: AntInput(placeholder: "请输入内容"),
            ),
            DemoBlock(
              title: "类型",
              child: Column(
                children: [
                  AntInput(
                    type: AntInputType.password,
                    placeholder: "请输入内容",
                    // height: 24,
                  ),
                ],
              ),
            ),
            DemoBlock(
              title: "变体",
              child: Column(
                spacing: 10,
                children: [
                  AntInput(
                    placeholder: "outlined",
                    variant: AntInputVariant.outlined,
                  ),
                  AntInput(
                    placeholder: "filled",
                    variant: AntInputVariant.filled,
                  ),
                  AntInput(
                    placeholder: "borderless",
                    variant: AntInputVariant.borderless,
                  ),
                  AntInput(
                    placeholder: "underlined",
                    variant: AntInputVariant.underlined,
                  ),
                ],
              ),
            ),
            DemoBlock(
              title: "对齐方式",
              child: Column(
                spacing: 10,
                children: [
                  AntInput(
                    placeholder: "左对齐",
                    align: AntInputAlign.left,
                    variant: AntInputVariant.outlined,
                  ),
                  AntInput(
                    placeholder: "右对齐",
                    align: AntInputAlign.right,
                    variant: AntInputVariant.outlined,
                  ),
                ],
              ),
            ),
            DemoBlock(
              title: "只读模式",
              child: AntInput(
                placeholder: "只读输入框",
                value: "这是只读内容",
                readOnly: true,
                variant: AntInputVariant.outlined,
              ),
            ),
            DemoBlock(
              title: "自定义样式",
              child: Column(
                spacing: 10,
                children: [
                  AntInput(
                    style: StateStyle(
                      style: Style(
                        borderRadius: 0,
                        borderBottom: StyleBorder(
                          color: Colors.blue,
                          width: 2,
                          style: BorderStyle.solid,
                        ),
                      ),
                    ),
                    placeholder: "请输入内容",
                  ),
                  AntInput(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 4),
                    placeholder: "请输入内容",
                    size: AntSize.large,
                    suffix: Icon(Icons.add),
                    // height: 24,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API ​

输入框的属性说明如下：

属性说明类型默认值
size组件大小AntSizemiddle
readOnly是否只读boolfalse
height输入框高度double?null
placeholder提示文本String?null
type输入框类型AntInputType?text
prefix前缀Widget?null
suffix后缀Widget?null
value当前值String?null
defaultValue默认值String?null
disabled是否禁用boolfalse
onChange值改变回调ValueChanged<String>?null
decoration输入框装饰BoxDecoration?null
padding内边距EdgeInsetsGeometry?null
style样式StateStyle?null
onBlur失去焦点回调ValueGetter<void>?null
onFocus获得焦点回调ValueGetter<void>?null
align对齐方式AntInputAlign?null
variant输入框样式AntInputVariant?borderless
borderRadius边框圆角BorderRadius?null
border边框BorderSide?null
focusedBorder选中时的边框BorderSide?null

AntInputType枚举值 ​

值说明
text文本输入
password密码输入
number数字输入

AntInputAlign枚举值 ​

值说明
left左齐
right右齐

AntInputVariant枚举值 ​

值说明
outlined描样式
borderless无边框样式
filled样式
underlined下划线样式

AntSize枚举值 ​

值说明尺寸
small小尺寸高24px
middle中尺寸高32px
large大尺寸高40px