Question

我不知道如何超越48px材质库的默认设置。我快速浏览了SDK，却找不到任何东西。我知道这与prefixIcon参数本身有关，因为它始终为48px或无论放置在里面的内容如何。

我有一个自定义SDK，所以如果有人知道它在哪里，我想减少它，因为它总是会妨碍您。

  // : Searchbar Decoration
  static InputDecoration searchbarDecoration = InputDecoration(
    prefixIcon: Icon(
      Icons.search,
      color: DocumentColours.colour10,
    ),
    contentPadding: EdgeInsets.symmetric(
      vertical: 0.0,
      horizontal: 0.0,
    ),
    fillColor: DocumentColours.colour8,
    filled: true,
    labelText: 'Search',
    labelStyle: FontStyles.searchbarLabel,
    hasFloatingPlaceholder: false,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5.0),
      borderSide: BorderSide(width: 0.0, style: BorderStyle.none),
    ),
  );

Answer 1

注意：要解决此问题，请使用prefixIconConstraints的{{1}}属性 自SDK版本1.17.0起

下面是文档说的InputDecoration：

BoxConstraints可用于修改prefixIcon的周围。此属性对于使装饰的高度小于48px尤其有用。这可以通过将[isDense]设置为true和将约束的最小高度和宽度设置为小于48px的值。

检查以下代码：效果很好：

(1.17.0) input_decorater.dart

我希望这会有所帮助。

Answer 2

我的方法是使用“行”>“图标” +“文本字段”来自定义我自己的文本字段组件，只是忘记在文本字段中有一个prefixIcon。

喜欢：


Container(
  width: 200.0,
  height: 40.0,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(3.0),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(
          left: 13.0,
          right: 6.0,
        ),
        child: Icon(
          Icons.search,
          size: 16.0,
        ),
      ),
      TextField(
        // ...
      ),
    ],
  ),
),

如何减少TextField上prefixIcon的填充？

2 个答案: