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(
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),
),
placeholder: "请输入内容",
height: 48,
suffix: Icon(Icons.add),
// height: 24,
),
],
),
),
])));
}
}
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
style | 按钮样式 | StateStyle | |
decoration | 背景渲染 | BoxDecoration | |
type | 输入框类型 | AntInputType: text | password | |
prefix | 前缀 | Widget | |
suffix | 后缀 | Widget | |
placeholder | 占位 | String | |
value | 值 | String | |
onChange | 值变化回调 | Function(String val) | |
onBlur | 失去焦点回调 | Function(String val) | |
onFocus | 获得焦点回调 | Function(String val) |