Flutter:在ListView中添加时,Stepper不滚动 [英] Flutter: Stepper is not scrolling when added inside ListView
问题描述
我有ListView,其中包含-
1.横幅图像
2.带有一些文本
的容器3.带有更多文本
的容器4.容器由步进器组成。
I have ListView which contains - 1. Banner Image 2. Container with some Text 3. Container with Some more Text 4. Container consist of Stepper.
我无法滚动,当我在点击步进器区域时尝试滚动时。甚至步进机的最后一步也无法显示。
I'm unable to scroll, When I try to scroll while taping the Stepper area. And even last step of stepper goes out of screen.
添加代码-
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;
});
},
),
);
}
}
尝试滚动点击步进区域。
Try to Scroll tapping Stepper area. Its not working.
推荐答案
找到了解决方案。 Stepper已经是可滚动的小部件,并且当我在ListView内添加Stepper时,它已成为另一个Scrollable小部件内的Scrollable小部件。
Found the solution. Stepper is already scroll-able widget, And as i was adding Stepper inside ListView it was becoming Scrollable widget inside another Scrollable widget.
@来自Gitter的FunMiles建议使用 NestedScrollView 小部件,而不是ListView&解决了我的问题。
@FunMiles from Gitter suggested to use NestedScrollView widget instead of ListView & that solved my prob.
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(),
),
);
}
}
这篇关于Flutter:在ListView中添加时,Stepper不滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!