如何垂直打破水平滚动列表？

Question

我有一个水平滚动的列表视图。里面有选择筹码，可以选择。但是，所有筹码都出现在一条长水平线上。我希望他们在达到屏幕限制时换行。

然后，整个列表视图可以滚动，有多个垂直芯片线。

我有：

ListView(children: <Widget>[
   Container(
   child: ListView(scrollDirection: 
   Axis.horizontal,
   children: <Widget>[ChoiceChipDisplay()]

芯片显示：

ChoiceChipDisplay() {
    List<Widget> choices = List();
    widget.reportList.forEach((item) {
      choices.add(Container(
        padding: const EdgeInsets.all(2.0),
        child: ChoiceChip(
          label: Text(item),
          labelStyle: TextStyle(
              color: Colors.black, fontSize: 14.0, fontWeight: FontWeight.bold),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
          ),
          backgroundColor: Color(0xffededed),
          selectedColor: Color(0xffffc107),
          selected: selectedChoice == item,
          onSelected: (selected) {
            setState(() {
              selectedChoice = item;
              print(selectedChoice)

我试过将它们包裹起来并设置水平方向限制，但没有成功。

Answer 1

我想你可以使用 Wrap

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Wrap(
            spacing: 4.0,
            children: <Widget>[
              for (var i = 0; i < 30; i++)
                ChoiceChip(
                  label: Text("item $i"),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                  backgroundColor: Color(0xffededed),
                  selectedColor: Color(0xffffc107),
                  selected: false,
                  onSelected: (b) {},
                )
            ],
          ),
        ],
      ),
    );
  }
}

如何垂直打破水平滚动列表？

How to break Horizontal Scroll List vertically?

user-interface

user-experience

dart

material-design

flutter