Flutter: 在ListView中添加Stepper时无法滚动

Question

我有一个包含以下内容的ListView：

1. Banner图像
2. 带有一些文本的容器
3. 带有更多文本的容器
4. 包含Stepper的容器

当我尝试在点击Stepper区域时滚动时，无法滚动。即使是Stepper的最后一步也超出了屏幕。

添加代码 -

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView(
        children: <Widget>[
          new MyContents(),
          new MyContents(),
          new MyContents(),
          new MyContents(),
          new SimpleWidget(),
        ],
      ),
    );
  }
}

class MyContents extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
            padding: new EdgeInsets.all(40.0),
            child: new Card(
              child: new Column(
                children: <Widget>[
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  )
                ],
              ),
            ),
            );
  }
}




class SimpleWidget extends StatefulWidget {
  @override
  SimpleWidgetState createState() => new SimpleWidgetState();
}

class SimpleWidgetState extends State<SimpleWidget> {
  int stepCounter = 0;
  List<Step> steps = [
    new Step(
      title:new Text("Step One"),
      content: new Text("This is the first step"),
      isActive: true,
    ),
    new Step(
      title:new Text("Step Two"),
      content: new Text("This is the second step"),
      isActive: true,
    ),
    new Step(
      title:new Text("Step Three"),
      content: new Wrap(
                  spacing: 8.0, // gap between adjacent chips
                  runSpacing: 4.0, // gap between lines
                  direction: Axis.horizontal, // main axis (rows or columns)
                  children: <Widget>[
                    new Chip(
                      label: new Text('Chips11')
                    ),new Chip(
                      label: new Text('Chips12')
                    ),new Chip(
                      label: new Text('Chips13')
                    ),new Chip(
                      label: new Text('Chips14')
                    ),new Chip(
                      label: new Text('Chips15')
                    ),new Chip(
                      label: new Text('Chips16')
                    )
                  ],
              ),
      state: StepState.editing,
      isActive: true,
    ),
    new Step(
      title: new Text("Step Four"),
      content: new Text("This is the fourth step"),
      isActive: true,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Stepper(
        currentStep: this.stepCounter,
        steps: steps,
        type: StepperType.vertical,
        onStepTapped: (step) {
          setState(() {
            stepCounter = step;
          });
        },
        onStepCancel: () {
          setState(() {
            stepCounter > 0 ? stepCounter -= 1 : stepCounter = 0;
          });
        },
        onStepContinue: () {
          setState(() {
            stepCounter < steps.length - 1 ? stepCounter += 1 : stepCounter = 0;
          });
        },
      ),
    );
  }
}

尝试滚动点击步进器区域。它不起作用。

- Tushar Pol

---

你能提供一些代码示例吗？ - tenhobi

编辑过的帖子，快来看看！ - Tushar Pol

Answer 1

如果步进器包含在另一个可滚动区域内，您可以将步进器物理特性设置为ClampingScrollPhysics。

Stepper(physics: ClampingScrollPhysics(), //remaing stepper code

在您的情况下，您正在使用可滚动的列表视图，通过将步进器物理属性设置为ClampingScrollPhysics()，父部件（列表视图）将具有步进器滚动的控制器

编辑： 正如@asubanovsky在评论中所述，您也可以使用NeverScrollableScrollPhysics()更精确地删除当前小部件的滚动行为，并让父小部件处理它

- Ali Kamal

---

如果步进器的父部件是可滚动的小部件，我们可以将NeverScrollableScrollPhysics()应用于其物理属性，并让滚动由父部件处理。 - asubanovsky

有人在Flutter Web中尝试过这个吗？对我来说，这个解决方案似乎在Flutter Web上不起作用，可能也与https://github.com/flutter/flutter/issues/34174有关。 - Qiong Wu

Answer 2

找到了解决方案。Stepper已经是可滚动的小部件，当我将Stepper放置在ListView中时，它变成了另一个可滚动的小部件。

@FunMiles在Gitter上建议使用NestedScrollView小部件代替ListView，这解决了我的问题。

class TestAppHomePage extends StatefulWidget {
  @override
  TestAppHomePageState createState() => new TestAppHomePageState();
}

class TestAppHomePageState extends State<TestAppHomePage>
    with TickerProviderStateMixin {
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Test Title'),
        elevation: 0.0,
      ),
      body: new NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverList(
              delegate:new SliverChildListDelegate(<Widget>[
                    new MyContents(),
                    new MyContents(),
                    new MyContents(),
                    new MyContents(),
              ]),
            ),
          ];
        },
        body: new SimpleWidget(),
      ),
    );
  }
}

- Tushar Pol

---

你好，你知道怎么在步进小部件中添加滚动条吗？我正在使用列。 - GoPro