颤动-在gridview上换行时如何设置宽度？

Posted 2023-02-23

【中文标题】颤动-在gridview上换行时如何设置宽度？

【英文标题】：flutter - how to set width when wrapping on gridview?

【发布时间】：2019-10-28 08:53:14

【问题描述】：

我想使用GridView 点赞Tags Widget 时遇到问题， 查看结果：

我想要如下图所示：

但是按钮的宽度是自动从GridView换行设置的。

如何动态设置width？

我们将不胜感激。

【参考方案1】：

class MyHomePage extends StatelessWidget 
  var tags = [
    "love",
    "instagood",
    "photooftheday",
    "beautiful",
    "fashion",
    "happy",
    "tbt",
    "cute",
    "followme",
    "like4like",
    "follow",
    "picoftheday",
    "me",
    "selfie",
    "summer",
    "instadaily"
  ];

  var selected_tags = ["love", "me", "summer"];

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Wrap(
        spacing: 8.0, // gap between adjacent chips
        runSpacing: 4.0, // gap between lines
        children: <Widget>[...generate_tags()],
      ),
    );
  

  generate_tags() 
    return tags.map((tag) => get_chip(tag)).toList();
  

  get_chip(name) 
    return FilterChip(
        selected: selected_tags.contains(name),
        selectedColor: Colors.blue.shade800,
        disabledColor: Colors.blue.shade400,
        labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        label: Text("#$name"));
  

【讨论】：

您可以根据您的要求使用Chip 变体：Chips

对不起，我忘了附上我的代码。但你上面的答案是我正在寻找的解决方案

【参考方案2】：

您正在尝试制作芯片（从材料）：https://material.io/design/components/chips.html#

您应该使用Chip 小部件（或列出的变体之一）：https://api.flutter.dev/flutter/material/Chip-class.html

您应该将网格更改为Wrap 小部件（女巫将包含筹码列表）： https://api.flutter.dev/flutter/widgets/Wrap-class.html

【讨论】：

我刚听说Chip Widget。这就是我要找的