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

Z时代
2024-01-10
分类：问答

我有包含以下内容的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;
          });
        },
      ),
    );
  }
}

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

回答：

找到了解决方案。Stepper已经是可滚动的小部件，并且当我在ListView中添加Stepper时，它已成为另一个Scrollable小部件中的Scrollable小部件。

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