Flutter：在 ListView 中添加时，Stepper 不滚动

Question

我有 ListView，其中包含 - 1. 横幅图片 2. 带有一些文本的容器 3. 包含更多文本的容器 4. 容器由步进器组成。

当我在点击步进器区域时尝试滚动时，我无法滚动。甚至步进器的最后一步也会出现在屏幕之外。

添加代码 -

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;
          });
        },
      ),
    );
  }
}

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

Answer 1

如果步进器包含在另一个可滚动对象中，您可以将步进器物理设置为 ClampingScrollPhysics

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

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

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

Answer 2

找到了解决办法。 Stepper 已经是可滚动的小部件，当我在 ListView 中添加 Stepper 时，它正在成为另一个可滚动小部件内的可滚动小部件。

来自 Gitter 的@FunMiles 建议使用 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(),
      ),
    );
  }
}