首页 > 解决方案 > 步进器中的 ListView - 步骤

问题描述

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

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

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

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

当我从 Column 中删除一个项目并调用 setState 来刷新 Step 时,呈现的东西并不一致,来自 DataSource 的 Items 的计数等于 Column 中的 Widget 的计数,但是显示的小部件被缓存以某种方式显示删除的项目。

标签: listviewnestedflutterstepper

解决方案


您可以将 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),] ...

推荐阅读