文本框的创建和设定

小淘1年前Flutter133

文本框作为一个接收用户输入的组件,被广泛应用于表单构建、即时通讯、搜索等场景中。

Flutter 提供了两个开箱即用的文本框组件: TextField 和 TextFormField。


文本框

TextField 是最常用的文本输入组件。

TextField 组件的默认样式是带有下划线的装饰样式。如果需要自定义装饰样式(添加标签、图标、提示文本和错误文本),可以将 InputDecoration 应用到 TextField 的 decoration 属性上。如果需要完全移除下划线和标签预留空间,可以将 decoration 属性设置为 null。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),),


要在内容发生变化时收到此内容,请参见 响应文本框内容的更改。


表单文本框

TextFormField 内部封装了一个 TextField 并被集成在表单组件 Form 中。如果需要对文本输入进行验证或者需要与其他表单组件 FormField 交互联动,可以考虑使用 TextFormField。

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),


相关文章

无状态Widget和有状态Widget

StatelessWidget无状态WidgetStateless widgets 是不可变的, 这意味着它们的属性不能改变——所有的值都是最终的。 如果无状态Widget里面有子Widge...

runApp主入口

runApp主入口在我们新建一个Flutter工程后,作为一个主入口开始运行我们的APPimport 'package:task_app/utils/app_tuil.dart';//...

欢迎使用小淘博客,

欢迎使用小淘博客,...

​Scafflod脚手架

Scafflod脚手架// 当我们在使用MaterialApp之后我们的home里面嵌套一层Scafflod脚手架// 即可更好的契合我们的 MaterialAppScaffold(   &...

导航到一个新页面和返回

导航到一个新页面和返回

我们通常会用“屏”来表示应用的不同页面(界面)。比如,某个应用有一“屏”展示商品列表,当用户点击某个商品的图片,会跳到新的一“屏”展示商品的详细信息。术语: 在 Flutter 中,屏 (screen...

在Flutter开发中一切皆为Widget

Flutter Widget在Flutter开发中一切皆为WidgetMaterialApp应用  MaterialApp(         &nbs...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。