3

我需要一个步进器来显示某物的当前状态（分步）。因此，我想一次显示所有状态的内容。我删除了默认的继续和取消按钮，但它只显示了第一步的内容。

这是我的代码：

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”。其余内容为空。

任何人？

4

3 回答 3

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(),
    ),
  ),
于 2019-12-09T20:45:38.920 回答
1

我做的：

  1. 将 MaterialUI 的 Stepper 类从该目录克隆flutter/lib/src/material/stepper.dart到项目中的另一个目录。例如，您将其复制并重命名为您的/lib/widget/modified_stepper.dart.

  2. 重命名 new 中的 2 个类名，modified_stepper.dart这样在使用时不会引起冲突。有 2 个类要重命名：Stepper和Step. 例如，将它们重命名为ModifiedStepperand ModifiedStep。

（提示：如果您使用的是 Visual Studio Code，您可以通过将光标移动到类名，然后按 Ctrl + F2 (Windows) 或 Cmd + F2 (Mac) 来使用多个光标来更快地执行重命名）

  1. 在这个新的 ModifiedStepper 类中，找到方法_isCurrent，它看起来像这样：
bool _isCurrent(int index) {
  return widget.currentStep == index;
}

此方法用于检测当前显示的是哪个步骤：如果currentStep等于index该步骤的 ，则显示该步骤。所以只需做一个技巧：returntrue总是会按照您预期的方式工作：

bool _isCurrent(int index) {
  return true;
  // return widget.currentStep == index;
}

现在您可以导入您ModifiedStepper的使用。

于 2020-02-04T11:46:06.963 回答
0

根据我对您的问题的理解，您实际上有两个问题。

  1. 第一个问题是您没有使用适当的 Flutter Widget 来完成您的任务。

  2. 第二个问题是您的 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;
}
于 2019-02-26T00:25:23.063 回答