2
votes

Flutter Stepper - Afficher tout le contenu

J'ai besoin d'un Stepper juste pour afficher l'état actuel de quelque chose (par étapes). Par conséquent, je voudrais afficher le contenu de tous les états à la fois. J'ai supprimé les boutons Continuer et Annuler par défaut, mais cela n'affiche que le contenu de la première étape.

Voici mon code:

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!"),
    )
  ];

Et voici mes étapes:

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,
                ),
              ],
            );
          },
        ),
      ),

Et ici, il ne montre que "Hello 1" pour la première étape. Pour le reste, le contenu est vide.

Quelqu'un?

flutter dart stepper

0 commentaires

3 Réponses :

0
votes

D'après ma compréhension de votre problème, vous avez en fait deux problèmes.

Le premier problème est que vous n'utilisez pas le widget Flutter approprié pour accomplir votre tâche.
Le deuxième problème est que vous avez un bogue dans votre exemple de code Stepper.

Étant donné que la résolution du problème n ° 2 ne résoudra en aucune manière le problème n ° 1, je vais suggérer ce qui suit comme solution:

La manière implicite dont fonctionne le widget Stepper de Flutter s'exclut mutuellement montrant toutes les étapes dans un état actif simultanément. Fondamentalement, Stepper n'est pas conçu pour faire ce que vous désirez. Dans votre cas, une meilleure approche pourrait être d'utiliser quelque chose comme 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;
}

0 commentaires

1
votes

Vous pouvez simplement utiliser la balise isActive dans l'étape pour montrer quel état a été complété par les utilisateurs. Je suppose que cela vous aidera à afficher l'état actuel de quelque chose.

Pour définir quel état est marqué -

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

Et votre code

bool getIsActive(int currentIndex, int index){
  if(currentIndex<=index){
    return true;
  }else{
    return false;
  }
}

1 commentaires

Cela n'affectera que le style.

0
votes

Je l'ai fait:

Clonez la classe Stepper de MaterialUI du répertoire flutter / lib / src / material / stepper.dart vers un autre répertoire de votre projet. Par exemple, vous le copiez et le renommez en /lib/widget/modified_stepper.dart.
Renommez les 2 noms de classe dans le nouveau modified_stepper.dart afin que cela ne provoque pas de conflits lorsque vous l'utilisez. Il y a 2 classes à renommer: Stepper et Step . Par exemple, renommez-les en ModifiedStepper et ModifiedStep.

(Astuces: Si vous utilisez Visual Studio Code, vous pouvez utiliser plusieurs curseurs pour effectuer le changement de nom plus rapidement en déplaçant votre curseur sur le nom de la classe, puis appuyez sur Ctrl + F2 (Windows) ou Cmd + F2 ( Mac))

Dans cette nouvelle classe ModifiedStepper, recherchez la méthode _isCurrent , elle ressemblera à ceci:

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

Cette méthode permet de détecter quelle étape est actuellement affichée: si le currentStep est égal à l ' index de l'étape, l'étape s'affichera alors. Alors faites simplement une astuce: return true fonctionnera toujours comme vous le souhaitiez:

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

Et maintenant vous pouvez importer votre ModifiedStepper code> à utiliser.

0 commentaires