Flutter 实现TextField的placeholder效果CupertinoTextField( placeholder: '手机账号',

最新推荐文章于 2025-10-17 00:07:16 发布

原创最新推荐文章于 2025-10-17 00:07:16 发布 · 9.3k 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Flutter中TextField组件的使用方法，包括hintText、labelText、icon和hintStyle等属性的作用，以及如何设置iOS风格的输入框。通过本文，读者可以了解到如何利用这些属性来定制输入框的外观和行为。

TextField组件有一个decoration属性改属性值为hintText即可

hintText 在输入时会消失,

labelText在输入时则会缩小到TextField的左上角

icon属性则类似iOS中的leftView,区别在于下方输入框长度

也可以设置hintStyle 属性,设置placeHoleder的颜色,大小,字体样式等

iOS风格的输入框设置:

CupertinoTextField(
                    placeholder: '手机账号',
                    // cursorRadius: ,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      border: Border.all(
                        color: Colors.blue,
                        style: BorderStyle.solid,
                        width: 2,
                      )
                    ),
                  ),