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

Posted 2023-02-23

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

【英文标题】：Show counter to number of elements hidden when overflow occurs in flutter row widget

【发布时间】：2021-05-28 03:42:08

【问题描述】：

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

【问题讨论】：

尝试更具体地解决您的问题

当 Gmail 的“收件人”字段中创建的电子邮件芯片太长时，我不知道此功能的名称，然后 Gmail 将它们隐藏起来，而是显示剩余电子邮件 ID 的计数器，如附件中所示图片。（+15）元素

【参考方案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();
  

它是如何工作的：

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

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