TextField:文本字段样式(InputDecoration)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

这个文本框的样式我们可以再定制一下 .. 找到这个 TextField 小部件 .. 先给它一个 decoration 属性,它的值是一个 InputDecoration ..

里面可以添加一个 icon 属性,给文本框添加一个小图标 .. 用一下 Icons.subject ..

你会发现,在文本框的左边会出现一个小图标 .. 文本框上面可以再添加一个 Label ... 也就是标签 .. 再添加一个 labelText 属性 .. 它的值是一个字符串 .. 输入一个 Title ..

这样会在文本框的上面显示一个标签 ..

文本框上面可以显示点提示文字 .. 添加一个 hintText .. 设置一下提示文字 ..

这样在文本框进入焦点状态 .. 并且它里面没有内容的时候 ... 上面显示的文字就是 hintText 这个属性设置的提示文字 ..

默认文本框的下面会有一条边框 .. 不需要的话,可以添加一个 border 属性 .. 把它的值设置成 InputBorder.none ..

如果想在四周添加一个边框 .. 可以把这个 border 的值,设置成 OutlineInputBorder ..

现在,文本框的四周都会有一个边框 .. 文本框进入焦点状态的时候,它上面的标签会有个动画效果 ..

暂时先注释掉这个 border 属性 .. 还有一种带背景颜色风格的文本框 .. 可以把 InputDecoration 的 filled 属性的值设置成 true ...

这样这个文本框会有一个灰色的背景 .. 这个背景颜色你可以使用 fillColor 属性去设置 ...

TextField:文本字段样式(InputDecoration)《 Flutter 移动应用:表单 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点