步进器中的 ListView - 步骤答案

【问题标题】：ListView in Stepper - Step步进器中的 ListView - 步骤
【发布时间】：2018-12-15 14:52:51
【问题描述】：

我检查了Stepper 类，发现它使用 ListView 以水平模式显示项目 (StepperType.horizontal)。

我不知道如何在 Step 中使用嵌套的 ListView。

我尝试了其他线程中提到的几种方法，但都没有奏效（由于无法计算高度）。

同时我使用的是 Column 而不是 ScrollView，但它有一个 BUG。

当我从Column中删除一个item并调用setState刷新Step时，渲染的东西并不一致，DataSource中Items的计数等于Column中Widget的计数，但显示的widget是缓存以某种方式显示已删除的项目。

【问题讨论】：

分享您的一些代码以及您想要实现的一些绘图或设计。
我有同样的问题，但使用 Column 小部件而不是 ListView 为我解决了问题
您是否设法在 Stepper 小部件中使用 ListView？我想使用 CheckBoxListTile，但找不到解决方案。

标签： listview nested flutter stepper

【解决方案1】：

你可以使用带行的singlechildscrollview

List<Step> steps = [
    Step(
        // Title of the Step
        title: Text("Send Money"),
        // Content, use SingleChildScrollView
        content:SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                children: <Widget>[

                  Container(
                    color: Colors.green, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
                     width: 300, height: 200, fit: BoxFit.contain),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png',
                     width: 200, fit: BoxFit.contain),

                  Container(
                    color: Colors.pink, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)),

                  Container(
                    color: Colors.redAccent, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
                     width: 300, height: 200, fit: BoxFit.contain),

                ],
              ),
             ),

        state: StepState.complete,
        isActive: true),] ...

【讨论】：