web-dev-qa-db-ja.com

Flutterの水平ステッパー

簡単な水平ステッパーを作りたいのですが、今回は歩数が多くなるはずです。

ほんの一例を挙げれば、これは私がバーティカルのためにやっていることです、

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:  Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          child: new ListView(
        children: <Widget>[
          new Text("Helllo "),
          new Text( " Welcome"),
          new Text (" Yaaa0"),
          new SimpleWidget(),
        ],
      ), ),
    );
  }
}





class SimpleWidget extends StatefulWidget {
  @override
  SimpleWidgetState createState() => new SimpleWidgetState();
}

class SimpleWidgetState extends State<SimpleWidget> {
  int stepCounter = 0;


  List<Step> steps = [];

   @override
  void initState() {
    prepareState();
    super.initState();
  }
  void prepareState(){
    for (var i= 0; i<100; i++){
      var stepVal = new Step(
      title:new Text("Step $i"),
      content: new Text("This is the child of $i step"),
      isActive: true,
    );
      steps.add(stepVal);

    }
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Stepper(
        type: StepperType.vertical,
        physics : ClampingScrollPhysics(),
        currentStep: this.stepCounter,
        steps: steps,
        onStepTapped: (step) {
          setState(() {
            stepCounter = step;
          });
        },
        onStepCancel: () {
          setState(() {
            stepCounter > 0 ? stepCounter -= 1 : stepCounter = 0;
          });
        },
        onStepContinue: () {
          setState(() {
            stepCounter < steps.length - 1 ? stepCounter += 1 : stepCounter = 0;
          });
        },
      ),
    );
  }
}

水平モードでこれを再現しようとすると、何も表示されません。私はlistViewを水平にしようとしましたが、ステッパーを個別にも一緒にも水平にしようとしました。機能しません。ダーツパッドでそれを試すことができます。

私の質問：1.水平モードでスクロール可能な水平方向のステッパーを作成する方法。 2.ステッパーのコンテンツはスクロール可能です。スイッチを切ることはできますか？

androidiosflutterstepper
2
Debanjan Chakraborty

これを試してみてください 例 例：conf pubspecファイル：fa_stepper：^ 0.0.2その後、フラッターパッケージが取得され、その後：FAStepperコンストラクターを使用して次のようなものを定義します。

Widget w1(BuildContext context) {
    return Scaffold(      
      // Body
      body: Container(
          child: FAStepper(
        // physics: ClampingScrollPhysics(),
        // Using a variable here for handling the currentStep
        currentStep: this.currentStep,
        // List the steps you would like to have
        titleHeight: 120,
        steps: mySteps,
        // Define the type of Stepper style
        // StepperType.horizontal :  Horizontal Style
        // StepperType.vertical   :  Vertical Style
        type: FAStepperType.horizontal,
        titleIconArrange: FAStepperTitleIconArrange.column,
        stepNumberColor: Colors.pinkAccent,
        // Know the step that is tapped
        onStepTapped: (step) {
          // On hitting step itself, change the state and jump to that step
          setState(() {
            // update the variable handling the current step value
            // jump to the tapped step
            currentStep = step;
          });
          // Log function call
          print("onStepTapped : " + step.toString());
        },
        onStepCancel: () {
          // On hitting cancel button, change the state
          setState(() {
            // update the variable handling the current step value
            // going back one step i.e subtracting 1, until its 0
            if (currentStep > 0) {
              currentStep = currentStep - 1;
            } else {
              currentStep = 0;
            }
          });
          // Log function call
          print("onStepCancel : " + currentStep.toString());
        },
        // On hitting continue button, change the state
        onStepContinue: () {
          setState(() {
            // update the variable handling the current step value
            // going back one step i.e adding 1, until its the length of the step
            if (currentStep < mySteps.length - 1) {
              currentStep = currentStep + 1;
            } else {
              currentStep = 0;
            }
          });
          // Log function call
          print("onStepContinue : " + currentStep.toString());
        },
      )),
    );
  }
1
dipnv

ステッパーをConstrainedBoxでラップし、その高さを定数に設定して、ステッパーのタイプを水平にします。ダートパッドで確認できます。

        return ConstrainedBox(
          constraints: BoxConstraints.tightFor(height: 500.0),
          child: Stepper(
              type: StepperType.horizontal,
            ),
        );
0
dadu mohapatra