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

【问题标题】：How to break Horizontal Scroll List vertically?如何垂直打破水平滚动列表？
【发布时间】：2020-01-18 19:51:10
【问题描述】：

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

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

我有什么：

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)

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

【问题讨论】：

标签： user-interface flutter dart material-design user-experience

【解决方案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) {},
                )
            ],
          ),
        ],
      ),
    );
  }
}

【讨论】：