行中图像的动态列表，带有换行符（之间没有空格），允许长按图像打开编辑选项 - Flutter

Posted 2023-02-27

【中文标题】行中图像的动态列表，带有换行符（之间没有空格），允许长按图像打开编辑选项 - Flutter

【英文标题】：Dynamic list of image in row with wrap (no space between) that allow for Long-pressing an image to open Edit options - Flutter

【发布时间】：2020-09-30 14:37:46

【问题描述】：

我收到了一个图像列表，我希望在每行 4 个项目的行中动态显示这些图像。如果有 5 个项目，则该行应该换行。问题是，我需要图像以允许长按单击以打开 appBar 中的编辑按钮。除了长按时的编辑按钮，它应该允许多选其他图像。

这段代码可以适应吗：

class cardy extends StatefulWidget 
  @override
  _cardyState createState() => new _cardyState();


class _cardyState extends State<cardy> 
  var isSelected = false;
  var mycolor=Colors.white;

  @override
  Widget build(BuildContext context) 
    return new Card(
      color: mycolor,
      child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        new ListTile(
            selected: isSelected,
            leading: const Icon(Icons.info),
            title: new Text("Test"),
            subtitle: new Text("Test Desc"),
            trailing: new Text("3"),
            onLongPress: toggleSelection // what should I put here,
            )
      ]),
    );
  

  void toggleSelection() 
    setState(() 
      if (isSelected) 
        mycolor=Colors.white;
        isSelected = false;
       else 
        mycolor=Colors.grey[300];
        isSelected = true;
      
    );
  

【参考方案1】：

是的，这段代码可以适用于此；）

首先，查看 SliverGrid 类。

https://api.flutter.dev/flutter/widgets/SliverGrid-class.html

这里有一个（不完整的）sn-p 可以帮助您入门，但您必须指定要使用的选项，因为这不会复制和粘贴解决您的问题：

SliverGrid(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 5,
        crossAxisSpacing: 3,
        crossAxisCount,
        ),
delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) 
        return Container())),

我会注意，如果您想使用您收集的信息，即您选择的图像，请注意将这些信息存储在某个地方。也就是说，您的示例切换了单个项目的选择，但是稍后您将如何获取该信息？也就是说，如果您单击 3 个项目然后点击编辑，您需要一种方法来记录哪些 3 个项目已被选中。一种选择是维护一个列表并 .removing / .add 将其作为切换的一部分。

【讨论】：

非常感谢斯科特。我会试试看。