步进器中的 Flutter Radio 值不变

Question

问题是 _qualificationRadioGroupValue 值在调用 setState() 时更新，但在调用构建方法后将其重置为原始值我是初学者，所以不知道我做错了什么我只测试了 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});
}

Answer 1

您可以复制粘贴运行下面的完整代码
第 1 步：List<Step> _steps = <Step>[]; 只构建了一次，然后每次都重复使用同一个实例。您可以参考 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});
}

步进器中的 Flutter Radio 值不变

Flutter Radio Value not Changing in Stepper

radio-button

dart

flutter

stepper