ボタンが親にあるときにボタンをクリックすると、子から親に値を取得するにはどうすればよいですか?

スノフキン・スワル

ステッパービューをフラッターで使用していますが、ボタンが親ウィジェットにあるため、ボタンのクリックで子から親に値を取得する際に問題が発生します。

これが私の親クラスと私の子クラスです。

親クラスこれは、次へと戻るボタンのあるステッパービューを持つ私の親クラスです。次のボタンがクリックされたときに、子クラスから親クラスに値を取得したいと思います。

   class DeliveryTimeline extends StatefulWidget {
      DeliveryTimeline({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<DeliveryTimeline> {
      int _currentStep = 0;
      String shippingtype;
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.white,
              centerTitle: true,
              iconTheme: new IconThemeData(color: Colors.black),
              elevation: 0,
              title: Text(
                "Checkout",
                style: TextStyle(color: Colors.black),
              ),
            ),
            body: Stepper(
                type: StepperType.horizontal,
                steps: _mySteps(),
                currentStep: this._currentStep,
                onStepTapped: (step) {
                  setState(() {
                    this._currentStep = step;
                  });
                },
                onStepContinue: () {
                  setState(() {
                    if (this._currentStep == 0) {
                      this._currentStep = this._currentStep + 1;

**//need to get value here on first next click**

                    } else if (this._currentStep == 1) {
                      this._currentStep = this._currentStep + 1;
                    } else {
                      print('Completed, check fields.');
                    }
    
                  });
                },
                onStepCancel: () {
                  setState(() {
                    if (this._currentStep > 0) {
                      this._currentStep = this._currentStep - 1;
                    } else {
                      this._currentStep = 0;
                    }
                  });
                },
                controlsBuilder: (BuildContext context,
                    {VoidCallback onStepContinue,
                    VoidCallback onStepCancel,
                    Function onShippingNextClick}) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      OutlineButton(
                          child: new Text("Back"),
                          onPressed: onStepCancel,
                          shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(4.0))),
                      MaterialButton(
                        child: Text("Next"),
                        color: AppColors.primarycolor,
                        textColor: Colors.white,
                        onPressed: onStepContinue,
                      ),
                    ],
                  );
                }));
      }
    
      List<Step> _mySteps() {
        List<Step> _steps = [
          Step(
            title: Text('Delivery'),
            content: Center(
              child: Container(
                height: MediaQuery.of(context).size.height / 1.5,
                child: Delivery(onShipingTypeClicked: (shippingtype){
                  shippingtype = shippingtype;
                  print("myvalue${shippingtype}");
                },),
              ),
            ),
            isActive: _currentStep >= 0,
          ),
          Step(
            title: Text('Address'),
            content: Address(),
            isActive: _currentStep >= 1,
          ),
          Step(
            title: Text('Payment'),
            content: Payment(),
            isActive: _currentStep >= 2,
          )
        ];
        return _steps;
      }
    
    
    }

子クラスこれは私の子クラスです。ラジオボタンのように機能するリストビューがあります。ボタンがクリックされたときに、選択したアイテムとその値を親クラスに表示します。

class Delivery extends StatefulWidget {
  final ValueChanged<String> onShipingTypeClicked;

   Delivery({this.onShipingTypeClicked});

  @override
  _DeliveryState createState() => _DeliveryState();
}

class _DeliveryState extends State<Delivery> {

  List<RadioModel> sampleData = new List<RadioModel>();




  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 0xffe6194B, "Standard Delivery",
        "Order will be delivered between 3 - 5 business days", 1));
    sampleData.add(new RadioModel(
        true,
        'A',
        0xffe6194B,
        "Next Day Delivery",
        "Place your order before 6pm and your items will be delivered the next day",
        2));
    sampleData.add(new RadioModel(
        false,
        'A',
        0xffe6194B,
        "Nominated Delivery",
        "Pick a particular date from the calendar and order will be delivered on selected date",
        3));


  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView.builder(
        itemCount: sampleData.length,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return new InkWell(
              onTap: () {
                setState(() {
                  sampleData.forEach((element) => element.isSelected = false);
                  sampleData[index].isSelected = true;
                  widget.onShipingTypeClicked(sampleData[index].buttonText);
                });
              },
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  TextSmallTitleSize(
                    title: sampleData[index].title,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Flexible(
                          child: TextSmallDimText(sampleData[index].label),
                        ),
                        RadioItem(sampleData[index]),
                      ],
                    ),
                  )
                ],
              ));
        },
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;

  RadioItem(this._item);

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: new EdgeInsets.all(15.0),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new Container(
            height: 25.0,
            width: 25.0,
            alignment: Alignment.center,
            child: Container(
                height: 15.0,
                width: 15.0,
                decoration: new BoxDecoration(
                  color: AppColors.primarycolor,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(15)),
                )),
            decoration: new BoxDecoration(
              color: Colors.transparent,
              border: new Border.all(
                  width: 3.0,
                  color: _item.isSelected
                      ? AppColors.primarycolor
                      : Colors.transparent),
              borderRadius: const BorderRadius.all(const Radius.circular(25)),
            ),
          ),
          new Container(margin: new EdgeInsets.only(left: 10.0))
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final int colorCode;
  final String title, label;
  final int buttonid;

  RadioModel(this.isSelected, this.buttonText, this.colorCode, this.title,
      this.label, this.buttonid);
}
チュンフンハン

以下の完全なコードをコピーして貼り付ける
ことができます。GlobalKeyを取得するためdeliveryState使用でき、の属性を取得するためにDelivery使用deliveryStateできDeliveryます。ここでの属性はRadioModel selected
ステップ1:使用するGlobalKey _key = GlobalKey();

class _MyHomePageState extends State<DeliveryTimeline> {
  ...
  GlobalKey _key = GlobalKey();

ステップ2:アイテムdeliveryStateを取得するために使用するseleted

onStepContinue: () {
          setState(() {
            if (this._currentStep == 0) {
              this._currentStep = this._currentStep + 1;

              final _DeliveryState deliveryState =
                  _key.currentState;
              print("hi ${deliveryState.selected.title} ${deliveryState.selected.label} ");

ステップ3:Delivery必要key

child: Delivery(
              key: _key,
              onShipingTypeClicked: (shippingtype) {
 ...
 Delivery({Key key, this.onShipingTypeClicked}) : super(key:key);

ステップ4:変数を設定する selected

RadioModel selected = null;
...
return InkWell(
              onTap: () {
                setState(() {
                  ...
                  selected = sampleData[index];  

作業デモ

ここに画像の説明を入力してください

作業デモの出力

I/flutter ( 6246): hi Standard Delivery Order will be delivered between 3 - 5 business days 

完全なコード

import 'package:flutter/material.dart';

class DeliveryTimeline extends StatefulWidget {
  DeliveryTimeline({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<DeliveryTimeline> {
  int _currentStep = 0;
  String shippingtype;
  GlobalKey _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          centerTitle: true,
          iconTheme: IconThemeData(color: Colors.black),
          elevation: 0,
          title: Text(
            "Checkout",
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Stepper(
            type: StepperType.horizontal,
            steps: _mySteps(),
            currentStep: this._currentStep,
            onStepTapped: (step) {
              setState(() {
                this._currentStep = step;
              });
            },
            onStepContinue: () {
              setState(() {
                if (this._currentStep == 0) {
                  this._currentStep = this._currentStep + 1;

                  final _DeliveryState deliveryState =
                      _key.currentState;
                  print("hi ${deliveryState.selected.title} ${deliveryState.selected.label} ");

                } else if (this._currentStep == 1) {
                  this._currentStep = this._currentStep + 1;
                } else {
                  print('Completed, check fields.');
                }
              });
            },
            onStepCancel: () {
              setState(() {
                if (this._currentStep > 0) {
                  this._currentStep = this._currentStep - 1;
                } else {
                  this._currentStep = 0;
                }
              });
            },
            controlsBuilder: (BuildContext context,
                {VoidCallback onStepContinue,
                VoidCallback onStepCancel,
                Function onShippingNextClick}) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  OutlineButton(
                      child: Text("Back"),
                      onPressed: onStepCancel,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4.0))),
                  MaterialButton(
                    child: Text("Next"),
                    color: Colors.blue,
                    textColor: Colors.white,
                    onPressed: onStepContinue,
                  ),
                ],
              );
            }));
  }

  List<Step> _mySteps() {
    List<Step> _steps = [
      Step(
        title: Text('Delivery'),
        content: Center(
          child: Container(
            height: MediaQuery.of(context).size.height / 1.5,
            child: Delivery(
              key: _key,
              onShipingTypeClicked: (shippingtype) {
                shippingtype = shippingtype;
                print("myvalue${shippingtype}");
              },
            ),
          ),
        ),
        isActive: _currentStep >= 0,
      ),
      Step(
        title: Text('Address'),
        content: Text("Address()"),
        isActive: _currentStep >= 1,
      ),
      Step(
        title: Text('Payment'),
        content: Text("Payment()"),
        isActive: _currentStep >= 2,
      )
    ];
    return _steps;
  }
}

class Delivery extends StatefulWidget {
  final ValueChanged<String> onShipingTypeClicked;

  Delivery({Key key, this.onShipingTypeClicked}) : super(key:key);

  @override
  _DeliveryState createState() => _DeliveryState();
}

class _DeliveryState extends State<Delivery> {
  List<RadioModel> sampleData = List<RadioModel>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(RadioModel(false, 'A', 0xffe6194B, "Standard Delivery",
        "Order will be delivered between 3 - 5 business days", 1));
    sampleData.add(RadioModel(
        true,
        'A',
        0xffe6194B,
        "Next Day Delivery",
        "Place your order before 6pm and your items will be delivered the next day",
        2));
    sampleData.add(RadioModel(
        false,
        'A',
        0xffe6194B,
        "Nominated Delivery",
        "Pick a particular date from the calendar and order will be delivered on selected date",
        3));
  }

  RadioModel selected = null;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: sampleData.length,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
              onTap: () {
                setState(() {
                  sampleData.forEach((element) => element.isSelected = false);
                  sampleData[index].isSelected = true;
                  selected = sampleData[index];
                  widget.onShipingTypeClicked(sampleData[index].buttonText);
                });
              },
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ListTile(
                    title: Text(sampleData[index].title),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Flexible(
                          child: Text(sampleData[index].label),
                        ),
                        RadioItem(sampleData[index]),
                      ],
                    ),
                  )
                ],
              ));
        },
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;

  RadioItem(this._item);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 25.0,
            width: 25.0,
            alignment: Alignment.center,
            child: Container(
                height: 15.0,
                width: 15.0,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(15)),
                )),
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                  width: 3.0,
                  color: _item.isSelected ? Colors.blue : Colors.transparent),
              borderRadius: const BorderRadius.all(const Radius.circular(25)),
            ),
          ),
          Container(margin: EdgeInsets.only(left: 10.0))
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final int colorCode;
  final String title, label;
  final int buttonid;

  RadioModel(this.isSelected, this.buttonText, this.colorCode, this.title,
      this.label, this.buttonid);
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: DeliveryTimeline(),
    );
  }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンが親にあるときにボタンをクリックすると、子から親に値を取得するにはどうすればよいですか?

分類Dev

親コンポーネントから別のボタンをクリックしたときに、子コンポーネントにあるボタンに動的クラス名を追加するにはどうすればよいですか?

分類Dev

DataGrid内からボタンがクリックされたときにDataGrid列の値を取得するにはどうすればよいですか?

分類Dev

親をクリック可能にせずに、同じクリックで親と子を削除するために、ボタンをボタンに実装するにはどうすればよいですか?(団結)

分類Dev

子要素が内部にあるボタンから同じIDを取得し、子要素のクリックを防ぐにはどうすればよいですか?

分類Dev

event.targetが子を返すときに、クリックイベントの親要素だけを取得するにはどうすればよいですか?

分類Dev

子コンポーネントの反応フックでボタンがクリックされたときに、親コンポーネントの関数を使用するにはどうすればよいですか?

分類Dev

送信ボタンをクリックしたときにdivが非表示にならないようにするにはどうすればよいですか?

分類Dev

ボタンを個別にクリックしたときにボタンの値を追加するにはどうすればよいですか?

分類Dev

ボタンをクリックして子コンポーネントから親コンポーネントに入力値を取得するにはどうすればよいですか?

分類Dev

ボタンがクリックされたときにボタンを無効にするにはどうすればよいですか?

分類Dev

ボタンをクリックしたときにボタンのIDを取得するにはどうすればよいですか?

分類Dev

クラスからボタンを作成するときにクリックメソッドを確認するにはどうすればよいですか?

分類Dev

別のボタンをクリックするとボタンが消えるようにするにはどうすればよいですか?

分類Dev

JQuery:ラジオボタンがクリックされたときにHTMLで値を印刷するにはどうすればよいですか?

分類Dev

クリックされたボタンの値を取得するにはどうすればよいですか?

分類Dev

ボタンクリックで現在の* ngFor値を取得するにはどうすればよいですか?

分類Dev

SQLiteデータベースから選択した特定の値を取得するにはどうすればよいですか?ボタンをクリックすると、アプリの突き出しがクラッシュします

分類Dev

次のボタンをクリックしたときにボタンの色をクリアするにはどうすればよいですか?

分類Dev

1秒ごとにボタンをクリックするにはどうすればよいですか?

分類Dev

ユーザーがクリックしたときにカウントできるボタンを作成するにはどうすればよいですか?

分類Dev

「上」と「下」ボタンがクリックされたときに境界線を上下に移動するにはどうすればよいですか?

分類Dev

シェルではなくクリックしたときに、ボタンの値をtkinterに表示するにはどうすればよいですか?

分類Dev

ボタンをクリックしたときに入力値を空白にするにはどうすればよいですか?

分類Dev

javafxとscenebuilderでボタンがクリックされたときに新しいラベルを作成するにはどうすればよいですか?

分類Dev

スタートボタンがクリックされたときにタイトル画面を終了するにはどうすればよいですか?

分類Dev

Firefoxで画像ボタンをクリックしたときに画像ボタンの点線を削除するにはどうすればよいですか?

分類Dev

スナック博覧会で停止ボタンがクリックされたときに音を停止するにはどうすればよいですか?

分類Dev

ボタンがクリックされたときにvalaで関数を非同期に実行するにはどうすればよいですか?

Related 関連記事

  1. 1

    ボタンが親にあるときにボタンをクリックすると、子から親に値を取得するにはどうすればよいですか?

  2. 2

    親コンポーネントから別のボタンをクリックしたときに、子コンポーネントにあるボタンに動的クラス名を追加するにはどうすればよいですか?

  3. 3

    DataGrid内からボタンがクリックされたときにDataGrid列の値を取得するにはどうすればよいですか?

  4. 4

    親をクリック可能にせずに、同じクリックで親と子を削除するために、ボタンをボタンに実装するにはどうすればよいですか?(団結)

  5. 5

    子要素が内部にあるボタンから同じIDを取得し、子要素のクリックを防ぐにはどうすればよいですか?

  6. 6

    event.targetが子を返すときに、クリックイベントの親要素だけを取得するにはどうすればよいですか?

  7. 7

    子コンポーネントの反応フックでボタンがクリックされたときに、親コンポーネントの関数を使用するにはどうすればよいですか?

  8. 8

    送信ボタンをクリックしたときにdivが非表示にならないようにするにはどうすればよいですか?

  9. 9

    ボタンを個別にクリックしたときにボタンの値を追加するにはどうすればよいですか?

  10. 10

    ボタンをクリックして子コンポーネントから親コンポーネントに入力値を取得するにはどうすればよいですか?

  11. 11

    ボタンがクリックされたときにボタンを無効にするにはどうすればよいですか?

  12. 12

    ボタンをクリックしたときにボタンのIDを取得するにはどうすればよいですか?

  13. 13

    クラスからボタンを作成するときにクリックメソッドを確認するにはどうすればよいですか?

  14. 14

    別のボタンをクリックするとボタンが消えるようにするにはどうすればよいですか?

  15. 15

    JQuery:ラジオボタンがクリックされたときにHTMLで値を印刷するにはどうすればよいですか?

  16. 16

    クリックされたボタンの値を取得するにはどうすればよいですか?

  17. 17

    ボタンクリックで現在の* ngFor値を取得するにはどうすればよいですか?

  18. 18

    SQLiteデータベースから選択した特定の値を取得するにはどうすればよいですか?ボタンをクリックすると、アプリの突き出しがクラッシュします

  19. 19

    次のボタンをクリックしたときにボタンの色をクリアするにはどうすればよいですか?

  20. 20

    1秒ごとにボタンをクリックするにはどうすればよいですか?

  21. 21

    ユーザーがクリックしたときにカウントできるボタンを作成するにはどうすればよいですか?

  22. 22

    「上」と「下」ボタンがクリックされたときに境界線を上下に移動するにはどうすればよいですか?

  23. 23

    シェルではなくクリックしたときに、ボタンの値をtkinterに表示するにはどうすればよいですか?

  24. 24

    ボタンをクリックしたときに入力値を空白にするにはどうすればよいですか?

  25. 25

    javafxとscenebuilderでボタンがクリックされたときに新しいラベルを作成するにはどうすればよいですか?

  26. 26

    スタートボタンがクリックされたときにタイトル画面を終了するにはどうすればよいですか?

  27. 27

    Firefoxで画像ボタンをクリックしたときに画像ボタンの点線を削除するにはどうすればよいですか?

  28. 28

    スナック博覧会で停止ボタンがクリックされたときに音を停止するにはどうすればよいですか?

  29. 29

    ボタンがクリックされたときにvalaで関数を非同期に実行するにはどうすればよいですか?

ホットタグ

アーカイブ