flutter文本输入框使用

在Flutter中，实现输入框一般使用TextField，通过设置它的属性给输入框和内部文字设置差别的样式。
Flutter 输入框实现简单例子

1. import 'package:flutter/material.dart';
3. class MyEditPage extends StatelessWidget {
4.   const MyEditPage({super.key});
6.   @override
7.   Widget build(BuildContext context) {
8.     return Scaffold(
9.       appBar: AppBar(
10.         title: const Text("My EditText"),
11.       ),
12.       //body 是否延伸到底部控件
13.       extendBody: true,
14.       body: Column(
15.         children: [
16.           //Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。
17.           const Spacer(),
18.           const Spacer(),
19.           Container(
20.               //通常用于给一个盒子的四边设置边距，用这个对象可以设置内边距。
21.               margin: const EdgeInsets.all(10),
22.               child: const Center(
23.                 child: TextField(
24.                   minLines: 1, //必须填1，输入内容才可居中，其他默认是左上对齐
25.                   maxLines: 10, //最多行数，大于1即可
26.                   decoration: InputDecoration(
27.                     border: OutlineInputBorder(
28.                         borderRadius: BorderRadius.all(Radius.circular(10)),
29.                         //圆角
30.                         borderSide: BorderSide(width: 1, color: Colors.yellow)),
31.                     focusedBorder: OutlineInputBorder(
32.                         borderRadius: BorderRadius.all(Radius.circular(10)),
33.                         //圆角
34.                         borderSide: BorderSide(width: 1, color: Colors.yellow)),
35.                     enabledBorder: OutlineInputBorder(
36.                         borderRadius: BorderRadius.all(Radius.circular(10)),
37.                         //圆角
38.                         borderSide: BorderSide(width: 1, color: Colors.yellow)),
39.                     errorBorder: OutlineInputBorder(
40.                         borderRadius: BorderRadius.all(Radius.circular(10)),
41.                         //圆角
42.                         borderSide: BorderSide(width: 1, color: Colors.yellow)),
43.                     disabledBorder: OutlineInputBorder(
44.                         borderRadius: BorderRadius.all(Radius.circular(10)),
45.                         //圆角
46.                         borderSide: BorderSide(width: 1, color: Colors.yellow)),
47.                     fillColor: Colors.white,
48.                     filled: true,
49.                     contentPadding: const EdgeInsets.all(5),
50.                   ),
51.                 ),
52.               ))
53.         ],
54.       ),
55.     );
56.   }
57. }

复制代码

下述代码可以抽出来： 

1. OutlineInputBorder(
2.       borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
3.       borderSide: BorderSide(width: 1, color: Colors.yellow))

复制代码

1. static const border = OutlineInputBorder(
2.       borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
3.       borderSide: BorderSide(width: 1, color: Colors.yellow));

复制代码

1. class MyEditPage extends StatelessWidget {  const MyEditPage({super.key});  static const border = OutlineInputBorder(
2.       borderRadius: BorderRadius.all(Radius.circular(10)), //圆角
3.       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 回调。



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。