Flutter:在步进器中使用下拉按钮

时间:2018-11-08 02:17:27

标签: dart flutter

在步进器内部使用时,下拉按钮无法切换为选定值,因为setState不能在步进器的步进内部使用。使用setState会引发错误“初始化程序内部只能使用静态成员。

下面是一个再现该问题的示例应用程序。有解决方法吗?

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _stepCounter = 0;
  static String value;

  List<Step> steps = [
    Step(title: Text("Step 1"), content: Text("Step 1"), isActive: true),
    Step(
        title: Text("Step 2"),
        content: DropdownButton(
            value: value,
            isExpanded: true,
            hint: Text("Choose an item"),
            items: [
              DropdownMenuItem(
                child: Text("Item 1"),
                value: "Item 1",
              ),
              DropdownMenuItem(
                child: Text("Item 2"),
                value: "Item 2",
              )
            ],
            onChanged: (value) {
              print(value);
            }),
        isActive: true)
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stepper + DropdownButton"),
        ),
        body: Container(
          child: Stepper(
            currentStep: _stepCounter,
            steps: steps,
            type: StepperType.vertical,
            onStepTapped: (step) {
              setState(() {
                _stepCounter = step;
              });
            },
            onStepCancel: () {
              setState(() {
                _stepCounter > 0
                    ? _stepCounter -= 1
                    : _stepCounter = _stepCounter;
              });
            },
            onStepContinue: () {
              setState(() {
                _stepCounter < (steps.length - 1)
                    ? _stepCounter += 1
                    : _stepCounter = _stepCounter;
              });
            },
          ),
        ),
      ),
    );
  }
}

我认为在stepper内部使用下拉菜单可能是一个常见的用例。因此,如果有任何解决方法,请提及

1 个答案:

答案 0 :(得分:0)

setState()不能在此处使用,因为尚未创建对象,并且您还没有访问权限this

另外,如果您使用setState(),则该代码必须位于可以为每个rebuild()调用的位置,否则它将无效。

以下代码按预期工作:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _stepCounter = 0;
  String value;

  List<Step> steps;

  List<Step> _buildSteps() {
    steps = [
      Step(title: Text("Step 1"), content: Text("Step 1"), isActive: true),
      Step(
          title: Text("Step 2"),
          content: DropdownButton(
              value: value,
              hint: Text("Choose an item"),
              items: [
                DropdownMenuItem(
                  child: Text("Item 1"),
                  value: "Item 1",
                ),
                DropdownMenuItem(
                  child: Text("Item 2"),
                  value: "Item 2",
                )
              ],
              onChanged: (newValue) {
                print(newValue);
                setState(() {
                  value = newValue;
                });
              }),
          isActive: true)
    ];
    return steps;
  }

  @override
  Widget build(BuildContext context) {
    print("rebuilt");
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stepper + DropdownButton"),
        ),
        body: Container(
          child: Stepper(
            currentStep: _stepCounter,
            steps: _buildSteps(),
            type: StepperType.vertical,
            onStepTapped: (step) {
              setState(() {
                _stepCounter = step;
              });
            },
            onStepCancel: () {
              setState(() {
                _stepCounter > 0
                    ? _stepCounter -= 1
                    : _stepCounter = _stepCounter;
              });
            },
            onStepContinue: () {
              setState(() {
                _stepCounter < (steps.length - 1)
                    ? _stepCounter += 1
                    : _stepCounter = _stepCounter;
              });
            },
          ),
        ),
      ),
    );
  }
}

有关初始化器的说明,请转到this question