如果使用了InputDecoration的suffixIcon或prefixIcon属性，则TextFormField中的TextInput获取底部填充

Question

顶部图片： 正常外观良好的TextFormField，而没有为Widget提供任何suffixIcon

底部图片： 为Icon Widget添加suffixIcon会使文本输入不必要地浮动

你知道是什么原因造成的吗？

代码： 这是带有suffixIcon

的普通TextFormField

   TextFormField(
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.search),
      )
    )

Answer 1

当前解决方案：

TextFormField(
   textAlignVertical: TextAlignVertical.bottom,
   decoration: InputDecoration(
      prefixIcon: Padding(
         padding: const EdgeInsets.only(top: 12.0, right: 12.0),
         child: Icon(Icons.search)
      ),
   ),
)

文档：

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 12.0),
  child: myIcon, // myIcon is a 48px-wide widget.
)

因为显然根据文档，prefixIcon和suffixIcon包裹在Padding Widget中，其值为12。因此，要使其恢复到原始位置，我们可以将其包裹起来相反的方向Padding，在这种情况下为top和right，因为我使用的是prefixIcon。如果使用suffixIcon，请用top和left包装。最后，要使文本输入不浮动（底部填充），请添加此textAlignVertical: TextAlignVertical.bottom

Answer 2

这可能不是最好的方法，但它可行。您可以用<Grid Padding="5" BackgroundColor="LightGray"> <ScrollView Padding="5" BackgroundColor="Red"> <Grid BackgroundColor="Aqua" ColumnSpacing="10" Padding="5" RowSpacing="5" HorizontalOptions="StartAndExpand" VerticalOptions="Start"> <Grid Margin="5,5,0,0" BackgroundColor="Pink"> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> <StackLayout Orientation="Horizontal" Margin="10,10,10,10" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Yellow"> <Image HeightRequest="100" WidthRequest="50" Source="github.png"/> <Image HeightRequest="100" WidthRequest="50" Source="github.png"/> <Image HeightRequest="100" WidthRequest="50" Source="github.png"/> <Image HeightRequest="100" WidthRequest="50" Source="github.png"/> <Image HeightRequest="100" WidthRequest="50" Source="github.png"/> </StackLayout> <Label Text="Name" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="End" TextColor="Black"/> </StackLayout> </Grid> </Grid> </ScrollView> </Grid> 包装TextFormField。这样可以使文本和图标位于同一行。

Container

输出