在Flutter中，实现输入框一般使用TextField，通过设置它的属性给输入框和内部文字设置不同的样式。
Flutter 输入框实现简单例子
import 'package:flutter/material.dart';
class MyEditPage extends StatelessWidget {
const MyEditPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("My EditText"),
),
//body 是否延伸到底部控件
extendBody: true,
body: Column(
children: [
//Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。
const Spacer(),
const Spacer(),
Container(
//通常用于给一个盒子的四边设置边距，用这个对象可以设置内边距。
margin: const EdgeInsets.all(10),
child: const Center(
child: TextField(
minLines: 1, //必须填1，输入内容才可居中，其他默认是左上对齐
maxLines: 10, //最多行数，大于1即可
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
//圆角
borderSide: BorderSide(width: 1, color: Colors.yellow)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
//圆角
borderSide: BorderSide(width: 1, color: Colors.yellow)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
//圆角
borderSide: BorderSide(width: 1, color: Colors.yellow)),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
//圆角
borderSide: BorderSide(width: 1, color: Colors.yellow)),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
//圆角
borderSide: BorderSide(width: 1, color: Colors.yellow)),
fillColor: Colors.white,
filled: true,
contentPadding: const EdgeInsets.all(5),
),
),
))
],
),
);
}
}
下述代码可以抽出来：
OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.yellow))static const border = OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.yellow));class MyEditPage extends StatelessWidget {
const MyEditPage({super.key});
static const border = OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.yellow));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("My EditText"),
),
//body 是否延伸到底部控件
extendBody: true,
body: Column(
children: [
//Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。
const Spacer(),
const Spacer(),
Container(
//通常用于给一个盒子的四边设置边距，用这个对象可以设置内边距。
margin: const EdgeInsets.all(10),
child: const Center(
child: TextField(
minLines: 1, //必须填1，输入内容才可居中，其他默认是左上对齐
maxLines: 10, //最多行数，大于1即可
decoration: InputDecoration(
border: border,
focusedBorder: border,
enabledBorder: border,
errorBorder: border,
disabledBorder: border,
fillColor: Colors.white,
filled: true,
contentPadding: const EdgeInsets.all(5),
),
),
))
],
),
);
}
OutlineInputBorder getBorder() {
OutlineInputBorder outlineInputBorder = const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.blue));
return outlineInputBorder;
}
}
TextField介绍
TextField 是 Material Design 文本字段。它允许用户使用硬件键盘或屏幕键盘输入文本。每当用户更改TextField 中的文本时，TextField 都会调用 onChanged 回调。如果用户完成在TextField 中的输入（例如，通过按下软键盘上的按钮），TextField 将调用 onSubmitted 回调。
const TextField({
super.key,
this.controller,
this.focusNode,
this.undoController,
this.decoration = const InputDecoration(),
TextInputType? keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.strutStyle,
this.textAlign = TextAlign.start,
this.textAlignVertical,
this.textDirection,
this.readOnly = false,
@Deprecated(
'Use `contextMenuBuilder` instead. '
'This feature was deprecated after v3.3.0-0.5.pre.',
)
this.toolbarOptions,
this.showCursor,
this.autofocus = false,
this.statesController,
this.obscuringCharacter = '•',
this.obscureText = false,
this.autocorrect = true,
SmartDashesType? smartDashesType,
SmartQuotesType? smartQuotesType,
this.enableSuggestions = true,
this.maxLines = 1,
this.minLines,
this.expands = false,
this.maxLength,
this.maxLengthEnforcement,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.onAppPrivateCommand,
this.inputFormatters,
this.enabled,
this.ignorePointers,
this.cursorWidth = 2.0,
this.cursorHeight,
this.cursorRadius,
this.cursorOpacityAnimates,
this.cursorColor,
this.cursorErrorColor,
this.selectionHeightStyle = ui.BoxHeightStyle.tight,
this.selectionWidthStyle = ui.BoxWidthStyle.tight,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
bool? enableInteractiveSelection,
this.selectionControls,
this.onTap,
this.onTapAlwaysCalled = false,
this.onTapOutside,
this.mouseCursor,
this.buildCounter,
this.scrollController,
this.scrollPhysics,
this.autofillHints = const <String>[],
this.contentInsertionConfiguration,
this.clipBehavior = Clip.hardEdge,
this.restorationId,
this.scribbleEnabled = true,
this.enableIMEPersonalizedLearning = true,
this.contextMenuBuilder = _defaultContextMenuBuilder,
this.canRequestFocus = true,
this.spellCheckConfiguration,
this.magnifierConfiguration,
}) 获取TextField中信息
1.使用onChanged回调方法，将TextField当前的值保存在变量中。
class MyEditPage extends StatelessWidget {
const MyEditPage({super.key});
static const border = OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.yellow));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("My EditText"),
),
//body 是否延伸到底部控件
extendBody: true,
body: Column(
children: [
//Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。
const Spacer(),
const Spacer(),
Container(
//通常用于给一个盒子的四边设置边距，用这个对象可以设置内边距。
margin: const EdgeInsets.all(10),
child: Center(
child: TextField(
onChanged: (String value) {
print("value:"+value);
},
minLines: 1, //必须填1，输入内容才可居中，其他默认是左上对齐
maxLines: 10, //最多行数，大于1即可
decoration: InputDecoration(
border: border,
focusedBorder: border,
enabledBorder: border,
errorBorder: border,
disabledBorder: border,
fillColor: Colors.white,
filled: true,
contentPadding: const EdgeInsets.all(5),
),
),
))
],
),
);
}
OutlineInputBorder getBorder() {
OutlineInputBorder outlineInputBorder = const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
borderSide: BorderSide(width: 1, color: Colors.blue));
return outlineInputBorder;
}
}
2024-09-03 11:45:37.758 5798-5832 flutter I value:1
2024-09-03 11:45:37.994 5798-5832 flutter I value:11
2024-09-03 11:45:38.437 5798-5832 flutter I value:115
2024-09-03 11:45:38.668 5798-5832 flutter I value:1155
2024-09-03 11:45:38.867 5798-5832 flutter I value:11555
2024-09-03 11:45:39.066 5798-5832 flutter I value:1155552.TextEditingController 控制器监听和控制TextField的文本
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TextFieldPageState extends State {
//文本框输入控制器
TextEditingController controller = TextEditingController();
//控制TextField焦点的获取与关闭
FocusNode focusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TextField 标题"),
actions: <Widget>[
FloatingActionButton(
child: Text(
"Click",
style: TextStyle(color: Colors.white),
),
onPressed: () {
//获取文本输入框内容
String inputText = controller.text;
print("文本输入框内容是：$inputText");
},
)
],
),
body: Center(
child: SizedBox(
width: 400,
height: 110,
child: Container(
color: Colors.white24,
padding: EdgeInsets.all(10),
alignment: Alignment(0, 0),
child: TextField(
controller: controller,
onChanged: (value) {
print("onChanged:$value");
},
),
),
),
),
);
}
@override
void initState() {
super.initState();
String preText = "";
//控制器，初始化的时候光标显示在文字后面
controller = TextEditingController.fromValue(TextEditingValue(
//用来设置初始化显示
text: preText,
selection: TextSelection.fromPosition(
//用来设置文本的位置
TextPosition(
affinity: TextAffinity.downstream, offset: preText.length))));
// 添加监听 当TextFeild 中内容发生变化 或者 焦点变动 都会触发回调
// onChanged 当TextFeild文本发生改变时才会回调
controller.addListener(() {
String currentStr = controller.text;
print("使用 Controller 监听 $currentStr");
});
}
}
class TextFieldHome extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return TextFieldPageState();
}
}
2024-09-03 14:32:20.094 23776-23959 flutter I 使用 Controller 监听 1
2024-09-03 14:32:20.280 23776-23959 flutter I 使用 Controller 监听 15
2024-09-03 14:32:20.449 23776-23959 flutter I 使用 Controller 监听 1553.TextField回调onEditingComplete & onSubmitted
onEditingComplete: () {
print("onEditingComplete:" "编辑完成——>" + controller.text);
}
输入123点击回车：
2024-09-03 14:45:45.778 28502-28537 flutter I onEditingComplete:编辑完成——>123 onSubmitted: (value) {
print("onSubmitted:$value");
}2024-09-03 14:45:45.779 28502-28537 flutter I onSubmitted:123
2024-09-03 14:45:49.374 28502-28537 flutter I onSubmitted:123
2024-09-03 14:49:16.016 28502-28537 flutter I onSubmitted:1234.TextField焦点
TextField获得焦点表示TextField被激活并且任何来自键盘的输入都会被录入到获得焦点的TextField内。
