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

Question

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

Answer 1

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

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

这是我的Code，请随时提出任何建议， （现在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 将变为 true
2. onChanged 将检测空间并将字符串发送到函数。
3. 该函数将在空格之前提取字符串，然后将字符串添加到芯片中，
4. 最后，芯片将被添加到芯片列表中。
5. 我们将有一个布尔变量来检查文本字段是否处于焦点以及何时显示文本字段和 numberwidget（一个将保持总筹码计数的小部件，就像您在问题中所问的一样）或何时显示筹码列表和文本字段包装在一个包装小部件中。
6. 您可以通过将文本字段的装饰更改为折叠来进行操作，使其看起来与 gmail 相同。

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