【问题标题】:Flutter Radio Value not Changing in Stepper颤振无线电值在步进器中没有改变
【发布时间】:2020-05-18 12:24:08
【问题描述】:

问题是当setState() 调用时_qualificationRadioGroupValue 值更新但在构建方法调用其重置为其原始值之后我是初学者,所以不知道我做错了什么我只测试了2个单选按钮它在步进器之外工作,但在步进器中不工作我不知道为什么

这是我屏幕的代码

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  final title;

  HomePage({this.title});

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

class _HomePageState extends State<HomePage> {
  List<Step> _steps = <Step>[];
  int _currentStep = 0;
  int _isStepsCompleted = false;

  @override
  void initState() {
    super.initState();
    _steps.add(_lastQualificationStep());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Stepper(
            steps: _steps,
            currentStep: _currentStep,
            onStepTapped: (step) => onStepTapped(step),
            onStepContinue: onStepContinue,
            onStepCancel: onStepCancel,
          ),
        ],
      ),
    );
  }

  void onStepContinue() {
    _currentStep + 1 != _steps.length
        ? onStepTapped(_currentStep + 1)
        : setState(() => _isStepsCompleted = true);
  }

  void onStepTapped(int step) => setState(() => _currentStep = step);

  void onStepCancel() {
    if (_currentStep > 0) {
      onStepTapped(_currentStep - 1);
    }
  }

  void setSelectRadioButton(int value, int groupValue) {
    print('Radio Value: $value');
    print('GroupValue before setState: $groupValue');
    setState(() {
      groupValue= value;
    });
    print('GroupValue after setState: $groupValue');
  }

  int _qualificationRadioGroupValue = 0;

  Step _lastQualificationStep() {
    List<RadioModel> qualifitcationList = [
      RadioModel(
          title: 'Pre-Engineering',
          value: 0,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Pre-Medical',
          value: 1,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'ICS', value: 2, groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Commerce',
          value: 3,
          groupValue: _qualificationRadioGroupValue),
    ];
    return Step(
      title: Text("What is your last qualification?"),
      isActive: _currentStep == 0,
      state: _currentStep == 0 ? StepState.editing : StepState.indexed,
      content: Column(
        children: _qualifitcationList
            .map(
              (qualification) => RadioListTile(
                title: Text(qualification.title),
                value: qualification.value,
                groupValue: qualification.groupValue,
                onChanged: (value) =>
                    setSelectRadioButton(value, qualification.groupValue),
              ),
            )
            .toList(),
      ),
    );
  }
}

class RadioModel {
  final title;
  final value;
  final groupValue;

  RadioModel({this.title, this.value, this.groupValue});
}

【问题讨论】:

    标签: flutter dart radio-button stepper


    【解决方案1】:

    您可以在下面复制粘贴运行完整代码
    第 1 步:List&lt;Step&gt; _steps = &lt;Step&gt;[]; 只构建一次,然后每次都重用同一个实例。详情可以参考https://github.com/flutter/flutter/issues/22033#issuecomment-424228926
    你需要使用

     List<Step> get _steps => <Step>[_lastQualificationStep()];
    

    第 2 步:将 groupValue 更改为 _qualificationRadioGroupValue

            children: qualifitcationList
                .map(
                  (qualification) => RadioListTile(
                title: Text(qualification.title),
                value: qualification.value,
                groupValue: _qualificationRadioGroupValue,
                onChanged: (value) =>
    
    ...
    setState(() {
      _qualificationRadioGroupValue = value;
    }); 
    

    工作演示

    完整代码

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      final title;
    
      HomePage({this.title});
    
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      List<Step> get _steps => <Step>[_lastQualificationStep()];
      int _currentStep = 0;
      bool _isStepsCompleted = false;
    
      @override
      void initState() {
        super.initState();
        //_steps.add(_lastQualificationStep());
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Stack(
            children: <Widget>[
              Stepper(
                steps: _steps,
                currentStep: _currentStep,
                onStepTapped: (step) => onStepTapped(step),
                onStepContinue: onStepContinue,
                onStepCancel: onStepCancel,
              ),
            ],
          ),
        );
      }
    
      void onStepContinue() {
        _currentStep + 1 != _steps.length
            ? onStepTapped(_currentStep + 1)
            : setState(() => _isStepsCompleted = true);
      }
    
      void onStepTapped(int step) => setState(() => _currentStep = step);
    
      void onStepCancel() {
        if (_currentStep > 0) {
          onStepTapped(_currentStep - 1);
        }
      }
    
      void setSelectRadioButton(int value, int groupValue) {
        print('Radio Value: $value');
        print('GroupValue before setState: $groupValue');
        setState(() {
          _qualificationRadioGroupValue = value;
        });
        print('GroupValue after setState: $groupValue');
      }
    
      int _qualificationRadioGroupValue = 0;
    
      Step _lastQualificationStep() {
        List<RadioModel> qualifitcationList = [
          RadioModel(
              title: 'Pre-Engineering',
              value: 0,
              groupValue: _qualificationRadioGroupValue),
          RadioModel(
              title: 'Pre-Medical',
              value: 1,
              groupValue: _qualificationRadioGroupValue),
          RadioModel(
              title: 'ICS', value: 2, groupValue: _qualificationRadioGroupValue),
          RadioModel(
              title: 'Commerce',
              value: 3,
              groupValue: _qualificationRadioGroupValue),
        ];
        return Step(
          title: Text("What is your last qualification?"),
          isActive: _currentStep == 0,
          state: _currentStep == 0 ? StepState.editing : StepState.indexed,
          content: Column(
            children: qualifitcationList
                .map(
                  (qualification) => RadioListTile(
                title: Text(qualification.title),
                value: qualification.value,
                groupValue: _qualificationRadioGroupValue,
                onChanged: (value) =>
                    setSelectRadioButton(value, qualification.groupValue),
              ),
            )
                .toList(),
          ),
        );
      }
    }
    
    class RadioModel {
      final title;
      final value;
      final groupValue;
    
      RadioModel({this.title, this.value, this.groupValue});
    }
    

    【讨论】:

    • 好的,我已经接受了你的正确答案,但我需要澄清一下 setState(() { _qualificationRadioGroupValue = value; },我希望 _qualificationRadioGroupValue 这是函数参数,所以我可以在其他步骤中使用相同的方法
    • 您可以使用 List 来记录您的所有步骤(例如 firstQualification、secondQualification、LastQualification)结果,因为在 Dart 中 int 是通过值而不是引用传递。
    猜你喜欢
    • 2019-04-19
    • 2021-05-30
    • 2023-01-02
    • 1970-01-01
    • 1970-01-01
    • 2021-08-23
    • 2021-12-04
    • 2021-08-29
    • 1970-01-01
    相关资源
    最近更新 更多