Flutter-TextField的动态后缀文本? [英] Flutter - Dynamic suffix text for TextField?

问题描述

我正在Flutter中构建一个简单的音板应用程序，该应用程序顶部包含一个搜索栏.

I'm building a simple soundboard app in Flutter, which includes a search bar at the top of the application.

在激活搜索时，小部件树的有趣部分如下:

At the point where the search is activated, the interesting bit of the widget tree is as follows:

home: Scaffold(
          appBar: AppBar(
            title: new TextField(
              controller: _filter,
              decoration: new InputDecoration(
                prefixIcon: new Icon(Icons.search, color: Colors.white),
                hintText: 'Search...'
          ),

在搜索栏中键入文本后，_filter上的侦听器将更新引号列表，该引号用于构建应用程序的主体.一切都很好.

As text is typed into the search bar, a listener on the _filter updates a list of quotes which is used to build the body of the app. This is all working fine.

但是，我现在希望该应用显示返回结果的计数，并且由于它位于我的标题栏中，因此我希望它与该栏本身位于同一行，例如:

However, I would now like the app to show a count of the returned results, and since this is sitting in my header bar I'd like it to sit in-line with the bar itself, something like:

我尝试过的东西，都在InputDecoration内:

Things I've tried, all within the InputDecoration:

• 设置suffixText-样式正确并在正确的位置，但是随着_filter的更改它不会更新，因为我并不是每次都重构TextField(而且我不能这样做因为它弄乱了所输入的内容).
• 使用自己的控制器将suffix设置为完整的TextField小部件.这会使它自动更新，但是由于某种原因使我的实际搜索文本模糊.我尝试使背景透明，但这无济于事-new TextField(controller: _searchCountController, readOnly: true, textAlign: TextAlign.end, style: TextStyle(backgroundColor: Colors.transparent),).在下面的屏幕截图中，我输入了一个'w'，它已将计数更新为84(但看不到我输入的'w'...)

• Setting suffixText - this is styled right and in the right place, however it doesn't update as the _filter changes because I'm not reconstructing the TextField every time (and I can't do this as it messes up what's been typed in).
• Setting suffix to a full TextField widget with its own controller. This gets it auto-updating, but for some reason obscures my actual search text. I tried making the background transparent but that hasn't helped - new TextField(controller: _searchCountController, readOnly: true, textAlign: TextAlign.end, style: TextStyle(backgroundColor: Colors.transparent),). In the below screenshot, I've typed a 'w' which has updated the count to 84 (but I can't see the 'w' I've typed...)

• 设置counter而不是suffix.我可以使它自动更新，并且不会模糊搜索，但是它出现在搜索栏下方，这使整个工作变得很麻烦.似乎不太适合标题栏中的内容.

• Setting counter instead of suffix. I can get this to auto-update and not obscure my search, but it appears under the search bar which makes the whole thing look naff. Doesn't really seem appropriate for something sat in the title bar.

关于如何实现自己追求的目标的任何建议?对Flutter来说是非常新的事物，所以我很可能错过了一些显而易见的事情.希望对此有一个简单的解决方案:)

Any suggestions for how I can achieve what I'm after? Very new to Flutter so very possible that I've missed something obvious. Hoping there's a simple solution to this :)

推荐答案

好吧，正如预期的那样，事实证明我缺少明显的东西，并且有一个简单的解决方案.我很难获得简单的suffixText进行更新，因为我最终要缓存组件，因此没有给予Flutter重新渲染它的机会.

Well, as expected it turned out I was missing something obvious and there was a simple solution. I was having trouble getting a simple suffixText to update because I was ultimately caching a component and therefore not giving Flutter a chance to re-render it.

万一它对任何人有帮助，我都会关注这篇文章来实现搜索栏.他们使用的模式是存储_appBarTitle小部件，该小部件仅在启动和取消搜索时才会更改.我放弃了这种方法，取而代之的是使用简单的_searching布尔值，然后让flutter进行其余操作:

In case it helps anyone, I had followed this post to implement a search bar. The pattern they use is to store an _appBarTitle widget which only gets changed when search is initiated and cancelled. I moved away from this approach, instead having a simple _searching boolean and allowing flutter to do the rest:

Widget _buildAppBar() {
    if (_searching) {
      return new TextField(
          controller: _filter,
          decoration: new InputDecoration(
            prefixIcon: new Icon(Icons.search, color: Colors.white),
            hintText: 'Search...',
            suffixText: '${_filteredQuotes.length}',
          ),
          autofocus: true,
          style: TextStyle(color: Colors.white));
    } else {
      return new Text('Pocket Scat');
    }
  }

使用这种方法，我根本不需要为后缀指定组件.它还具有自动从我的应用样式中获取hintColor的优势.

With this approach, I don't need to specify a component for the suffix at all. It also has the advantage of automatically scooping up hintColor from my app's style.

这篇关于Flutter-TextField的动态后缀文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！