当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器

如何解决当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器

任何人都可以帮助实现 Gmail 的这个功能，当电子邮件列表变大时，它会显示隐藏的电子邮件数量的计数器吗？我想在行小部件中实现这一点，而不是在发生溢出时显示可滚动的额外元素计数。Gmail shows +15 counter for hidden emails

解决方法

我很想尝试达到同样的效果，正如所问的那样。

以防万一，如果有人想开始编写自定义程序，那么下面的代码可能会有所帮助。

这是我的Code，请随时提出任何建议， （由于某些逻辑问题，芯片中的 Now delete 按钮无法正常工作，我将改天让它工作）

import 'package:flutter/material.dart';

class Demo3 extends StatefulWidget {
  @override
  _Demo3State createState() => _Demo3State();
}

class _Demo3State extends State<Demo3> {
  String temp = "";
  bool showChips = false;
  List<Widget> chipsList = new List();
  TextEditingController textEditingController = new TextEditingController();
  final _focusNode = FocusNode();
  int countChipsToDeleteLater = 0;

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      print("Has focus: ${_focusNode.hasFocus}");
      if (!_focusNode.hasFocus) {
        showChips = false;
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },child: new Container(
          height: 500,child: new Center(
            child: Container(
              width: 300,child: !showChips
                  ? Row(
                      children: [
                        buildTextField(),showNumberWidgetIfAny(),],)
                  : Center(
                      child: Wrap(
                        children: [
                          Wrap(
                            children: buildChips(),),buildTextField(),);
  }

  buildChips() {
    return chipsList;
  }

  buildTextField() {
    return Container(
      width: 200,child: new TextField(
        showCursor: true,focusNode: _focusNode,autofocus: true,cursorColor: Colors.black,style: new TextStyle(fontSize: 22.0,color: Colors.black),controller: textEditingController,// decoration: InputDecoration.collapsed(
        //   hintText: "",// ),onChanged: (value) {
          if (value.contains(" ")) {
            checkWhatToStoreInChips(value,countChipsToDeleteLater);
            textEditingController.clear();
            setState(() {
              showChips = true;
            });
            countChipsToDeleteLater++;
          }
        },);
  }

  checkWhatToStoreInChips(String val,int chipsIndex) {
    temp = "";
    for (int i = 0; i < val.length; i++) {
      if (val[i] == " ") {
        break;
      }
      temp = temp + val[i];
    }
    addToChips(temp,chipsIndex);
  }

  addToChips(String tmp,int chipsIndex) {
    chipsList.add(Chip(
      // onDeleted: () {
      //   if (chipsList.length == 0) {
      //     countChipsToDeleteLater = 0;
      //   }
      //   chipsList.removeAt(chipsIndex);
      //   print(chipsList.length);
      //   print(chipsIndex);
      //   setState(() {});
      // },avatar: CircleAvatar(
        backgroundColor: Colors.grey.shade800,child: Text(tmp[0]),label: Text(temp),));
  }

  showNumberWidgetIfAny() {
    int len = chipsList.length;
    if (len >= 1) {
      return GestureDetector(
        onTap: () {
          showChips = true;
          setState(() {});
        },child: new Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,color: Colors.blue,child: Padding(
            padding: const EdgeInsets.all(8.0),child: new Text(
              "${chipsList.length.toString()} ",style: new TextStyle(color: Colors.white,fontSize: 22),);
    }
    return Container();
  }
}

工作原理：

1. 在文本框中写一些东西，然后按空格，showChips boolean 将变为真
2. onChanged 将检测空格并将字符串发送到函数。
3. 该函数将提取空格前的字符串，然后将该字符串添加到芯片中，
4. 最后，芯片将被添加到芯片列表中。
5. 我们将有一个布尔变量来检查文本字段是否处于焦点以及何时显示文本字段和数字小部件（一个可以记录总筹码数的小部件，与您在问题中提出的相同）或何时显示包裹在包裹小部件中的芯片列表和文本字段。
6. 您可以通过将文本字段的装饰更改为折叠来进行操作，使其看起来与 gmail 相同。

如果您想轻松使用自定义包，请检查 this 包。