gridview - flutter - 在 gridview 上换行时如何设置宽度?

标签 gridview flutter dart widget

当我想使用 GridView 制作类似 Tags Widget 时遇到问题, 查看结果:

image

想要如下所示: image

但是按钮的宽度是根据 GridView 包装自动设置的。

如何动态设置宽度

任何答案将不胜感激。

最佳答案

Demo of Chips widget

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}"));
  }
}

关于gridview - flutter - 在 gridview 上换行时如何设置宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56585958/

相关文章:

dart - 如何覆盖 Dart 中枚举的toString方法

android - 我如何以编程方式(Java 代码)声明此 GridView?

flutter - 多个小部件在 flutter 中使用相同的 globalkey 错误

Flutter:在构建期间调用 setState() 或 markNeedsBuild()。使用 future builder 和 obx

http - 如何在 Flutter GET Api 请求中添加多个 header

flutter - 当条件为真时设置标记的状态

java - ListAsGridBaseAdapter 仅在项目数为偶数时显示网格项目

android - 如何垂直拉伸(stretch) GridView 的单元格?

css - 当我知道该值不为空时,Asp.net 参数显示为 null

list - 在Flutter/Dart中对具有相同属性(时间戳)的不同对象的列表进行排序