Example of desired effect
我有一个TextField
和一个InputDecoration
,其中我设置了一个hintText
和一个prefixIcon
,但是我使用的prefixIcon
属性总是将图标一直拉到左边。
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 30, 0, 30),
prefixIcon: Icon(Icons.search),
hintText: 'Search',
fillColor: Color(0xffF1F4FB),
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: Color(0xffF1F4FB),
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: Color(0xffF1F4FB),
),
),
),
),
我正在尝试更改这个设置,使搜索图标和提示文本一开始就相互居中。我该如何实现这个效果?
3条答案
按热度按时间doinxwow1#
下面是一个使用
IntrinsicWidth
的解决方案。使用此解决方案,搜索图标将位于
hinttext
旁边,然后它将停留在用户输入的文本旁边。q5iwbnjs2#
将
prefixIcon
设置为www.example.com中的Row
就可以了。但是它覆盖了整个textField,所以当textField处于焦点位置时,我们需要将其替换为普通图标。MainAxisAlignment.center could do the trick.butit covers the whole textField, so we need to replace it with a normal icon when the textField is in focus.您可以使用
FocusNode
检测焦点。要了解更多信息,请阅读Focus and text fields代码:
xlpyo6sf3#
我使用
prefixIconConstraints
来实现这一点。只需使用prefixIcon
将其添加到TextFormField
的装饰中,如下所示:你还应该想通过在
TextFormField
的修饰中添加一些填充来使你的字段看起来更大: