[英]Flutter Stepper - Show all content
我需要一个步进器来显示某物的当前状态(按步骤)。 因此,我想一次显示所有状态的内容。 我删除了默认的继续和取消按钮,但它只显示第一步的内容。
这是我的代码:
body: Center(
child: new Stepper(
steps: my_steps,
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
Container(
child: null,
),
Container(
child: null,
),
],
);
},
),
),
这些是我的步骤:
List<Step> my_steps = [
new Step(
title: new Text("Step 1"),
content: new Text("Hello 1!")),
new Step(
title: new Text("Step 2"),
content: new Text("Hello 2!")
),
new Step(
title: new Text("Step 3"),
content: new Text("Hello World!"),
)
];
在这里它只显示第一步的“Hello 1”。 其余内容为空。
任何人?
只需在 Step 中使用 isActive 标记来显示用户已完成的所有状态。 我想这将帮助您显示某事的当前状态。
设置标记所有状态 -
bool getIsActive(int currentIndex, int index){
if(currentIndex<=index){
return true;
}else{
return false;
}
}
还有你的代码
body: Center(
child: new Stepper(
steps: [
new Step(
title: new Text("Step 1"),
content: new Text("Hello 1!"),
isActive: getIsActive(0,_index),
),
new Step(
title: new Text("Step 2"),
content: new Text("Hello 2!"),
isActive: getIsActive(1,_index),
),
new Step(
title: new Text("Step 3"),
content: new Text("Hello World!"),,
isActive: getIsActive(2,_index),
)
],
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) => Container(),
),
),
我做到了:
将 MaterialUI 的 Stepper 类从目录flutter/lib/src/material/stepper.dart
到项目中的另一个目录。 例如,您将其复制并重命名为/lib/widget/modified_stepper.dart
。
重命名新的modified_stepper.dart
的 2 个类名,以便在使用时不会引起冲突。 有 2 个要重命名的类: Stepper
和Step
。 例如,将它们重命名为ModifiedStepper
和ModifiedStep
。
(提示:如果您使用的是 Visual Studio Code,您可以通过将光标移动到类名,然后按 Ctrl + F2 (Windows) 或 Cmd + F2 (Mac) 来使用多个光标来更快地执行重命名)
_isCurrent
,它看起来像这样:bool _isCurrent(int index) {
return widget.currentStep == index;
}
该方法用于检测当前显示的是哪个步骤:如果currentStep
等于该步骤的index
,则显示该步骤。 所以简单地做一个技巧: return true
总是会按照你预期的方式工作:
bool _isCurrent(int index) {
return true;
// return widget.currentStep == index;
}
现在您可以导入您的ModifiedStepper
来使用。
根据我对您的问题的理解,您实际上有两个问题。
第一个问题是您没有使用合适的 Flutter Widget 来完成您的任务。
第二个问题是您的 Stepper 示例代码中存在错误。
由于修复问题 #2 不会以任何方式解决问题 #1,我将建议以下作为您的解决方案:
Flutter 的 Stepper Widget 的隐式工作方式相互排斥同时显示处于活动状态的所有步骤。 基本上 Stepper 的设计并不是为了做你想做的事。 在您的情况下,更好的方法可能是使用 ListBuilder 之类的东西:
import 'dart:io' as Io;
import 'package:flutter/material.dart';
class zListTileExample extends StatefulWidget {
zListTileExample({Key key}) : super(key: key);
@override
zListTileExampleState createState() => zListTileExampleState();
}
class zListTileExampleState extends State <zListTileExample> {
List<SampleStepTile> my_steps = [
new SampleStepTile(
title: new Text("Step 1"),
content: new Text("Hello 1!")),
new SampleStepTile(
title: new Text("Step 2"),
content: new Text("Hello 2!")
),
new SampleStepTile(
title: new Text("Step 3"),
content: new Text("Hello World!"),
)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My App Title"),
),
body:
ListView.builder(
itemCount: my_steps.length,
itemBuilder: (context, index) {
return
Column ( children: <Widget> [
ListTile(
title: my_steps[index].title ,
subtitle: my_steps[index].content
)
, Row ( children : <Widget> [
RaisedButton ( child: new Text ("Use")
, onPressed: () { print ("Step $index is ok");}),
RaisedButton ( child: new Text ("Cancel")
, onPressed: () { print ("Step $index is canceled");})
]
)
]
);
},
)
);
}
}
class SampleStepTile {
SampleStepTile({Key key, this.title, this.content });
Text title;
Text content;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.