带有 IconButton 的 Flutter TextField

Question

这个小部件有两个问题。添加 suffix: IconButton... 时，它会在文本字段内添加看起来像填充的内容。当 _searchController.text 不为空时，如何显示后缀图标。我试过 _searchController.text != null ？ IconButton(...): '不知道在这里返回什么'

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffix: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () => _searchController.clear(),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

带后缀:

没有后缀:

Answer 1

我最终使用了两个答案中的想法。一个没有解释如何显示和隐藏图标，另一个似乎有点太复杂了。我所做的只是 _searchController.text.isEmpty

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffixIcon: _searchController.text.isEmpty
            ? null
            : InkWell(
                onTap: () => _searchController.clear(),
                child: Icon(Icons.clear),
              ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }