Flutter Stepper - 顯示所有內容

Question

我需要一個步進器來顯示某物的當前狀態（按步驟）。 因此，我想一次顯示所有狀態的內容。 我刪除了默認的繼續和取消按鈕，但它只顯示第一步的內容。

這是我的代碼：

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”。 其余內容為空。

任何人？

Answer 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(),
    ),
  ),

Answer 2

我做到了：

1. 將 MaterialUI 的 Stepper 類從目錄flutter/lib/src/material/stepper.dart到項目中的另一個目錄。 例如，您將其復制並重命名為/lib/widget/modified_stepper.dart 。

2. 重命名新的modified_stepper.dart的 2 個類名，以便在使用時不會引起沖突。 有 2 個要重命名的類： Stepper和Step 。 例如，將它們重命名為ModifiedStepper和ModifiedStep 。

（提示：如果您使用的是 Visual Studio Code，您可以通過將光標移動到類名，然后按 Ctrl + F2 (Windows) 或 Cmd + F2 (Mac) 來使用多個光標來更快地執行重命名）

3. 在這個新的 ModifiedStepper 類中，找到方法_isCurrent ，它看起來像這樣：

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

該方法用於檢測當前顯示的是哪個步驟：如果currentStep等於該步驟的index ，則顯示該步驟。 所以簡單地做一個技巧： return true總是會按照你預期的方式工作：

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

現在您可以導入您的ModifiedStepper來使用。

Answer 3

根據我對您的問題的理解，您實際上有兩個問題。

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;
}