如何在 Flutter 中使用圆形项目制作 ListView 或 Catgories答案

【问题标题】：How to make a ListView or Catgories with Circle Items in Flutter如何在 Flutter 中使用圆形项目制作 ListView 或 Catgories
【发布时间】：2020-05-28 00:03:21
【问题描述】：

我怎样才能制作一个包含像这张图片这样的子类别的 itemCategories 列表，任何建议

谢谢

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以查看以下使用 Wrap 小部件的示例

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = [
      {'name': 'Shopping', 'color': Colors.blue, 'icon': Icons.local_shipping},
      {'name': 'Service', 'color': Colors.red, 'icon': Icons.room_service},
      {'name': 'Hotel', 'color': Colors.green, 'icon': Icons.hotel},
      {'name': 'More', 'color': Colors.amber, 'icon': Icons.more},
      {'name': 'Custom', 'color': Colors.orange, 'icon': Icons.add_to_photos},
    ];
    return Scaffold(
        body: Center(
            child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 8.0, // gap between adjacent chips
                runSpacing: 4.0, // gap between lines
                children: data
                    .map((e) => Column(
                          children: <Widget>[
                            ClipOval(
                              child: Container(
                                color: e["color"],
                                child: SizedBox(
                                    width: 50,
                                    height: 50,
                                    child: Icon(
                                      e["icon"],
                                      color: Colors.white,
                                      size: 30,
                                    )),
                              ),
                            ),
                            Text(e["name"])
                          ],
                        ))
                    .toList())));
  }
}

【讨论】：

Sanjay Sharma 谢谢，但我还想要一个子类别，例如 {'name': 'Shopping', 'color': Colors.blue, 'icon': Icons.local_shipping,'sub': ['children','women']}，子类别将是带边框的文本
你能分享一下截图或线框图应该是什么样子吗？
当我点击一个类别时，我想显示子类别
您可以在单击图标时显示弹出菜单。不能吗？
你能检查一下这个问题吗stackoverflow.com/questions/62064938/…