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