【问题标题】:Flutter Radio Button not showing that it is selected颤振单选按钮未显示它已被选中
【发布时间】:2020-11-05 23:18:11
【问题描述】:

我有三个单选按钮,以便用户可以选择他们的性别。但是,只有男性单选按钮被突出显示。即使我的控制台在选择时打印其他单选按钮,它们也不会在屏幕上突出显示。我不知道该怎么做,所以任何帮助都将不胜感激!

    import 'package:flutter/material.dart';
import 'package:vibing/User_Login.dart';
import 'package:vibing/register_user.dart';
import 'package:vibing/register_user.dart';

class UserDetails extends StatefulWidget {
  @override
  _UserDetailsState createState() => _UserDetailsState();
}

enum Gender{
  Male, Female, Others
}

class _UserDetailsState extends State<UserDetails> {


  @override
  Widget build(BuildContext context) {
    final formkey = GlobalKey<FormState>();

     String user_name;
     String user_age;
     int group_value = -1;
     Gender _gender = Gender.Male;


    final _userName = Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: TextFormField(
        autofocus: false,
        keyboardType: TextInputType.text,
        validator: (value) {
          if(value.isEmpty)
          {
            return 'Field cannot be empty';
          }
          return null;
        },
        onSaved: (value)=> user_name = value,
        decoration: InputDecoration(
          hintText: 'Enter Name',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10)
          ),
        ),
      ),
    );




    final _userAge = Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: TextFormField(
        keyboardType: TextInputType.number,
        autofocus: false,
        validator: (value) {
          if(value.isEmpty)
          {
            return 'Field cannot be empty';
          }
          return null;
        },
        onSaved: (value)=> user_age = value,
        decoration: InputDecoration(
          hintText: 'Enter Age',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10)
          ),
        ),
      ),
    );




    final _male = Radio(
      value: Gender.Male,
      activeColor: Colors.black,
      groupValue: _gender,
      onChanged: (Gender value){
        setState(() {
          print(value);
          _gender = value;
        });
      },
    );


    final _female = Radio(
      activeColor: Colors.black,
    value: Gender.Female,
    groupValue: _gender,
    onChanged: (Gender value){
      setState(() {
        print(value);
        _gender = value;
      });
    },
    );

    final _others = Radio(
      activeColor: Colors.black,
        value: Gender.Others,
        groupValue: _gender,
        onChanged: (Gender value){
          setState(() {
            print(value);
            _gender = value;
          });
        },
      );


    return Scaffold(
      backgroundColor: Colors.yellow,
      body: Container(
        key: formkey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Register",
            style: TextStyle(fontSize: 64.0, fontWeight: FontWeight.bold),),
            SizedBox(height: 50,),
            _userName,
            SizedBox(height: 20,),
            _userAge,
            SizedBox(height: 30,),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center ,
              children: <Widget>[
                Text("      Gender: ", style: TextStyle(fontSize: 20.0),),
                _male,
                Text("Male"),
                _female,
                Text("Female"),
                _others,
                Text("Others"),
              ],
            ),

            Row(
              crossAxisAlignment: CrossAxisAlignment.center ,
              children: <Widget>[
                FloatingActionButton.extended(
                    heroTag: "next_button",
                    backgroundColor: Colors.yellow,
                    foregroundColor: Colors.black,
                    onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserReg())),
                    label: Text("Next", style: TextStyle(fontWeight: FontWeight.bold),)
                ),
                SizedBox(width: 230,),
                FloatingActionButton.extended(
                    heroTag: "prev_button",
                    backgroundColor: Colors.yellow,
                    foregroundColor: Colors.black,
                    onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserLogin())),
                    label: Text("Prev", style: TextStyle(fontWeight: FontWeight.bold),)
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: android ios flutter flutter-layout


    【解决方案1】:

    它不起作用,因为您在构建函数中声明了状态。搬出去:

    class _UserDetailsState extends State<UserDetails> {
        String user_name;
        String user_age;
        int group_value = -1;
        Gender _gender = Gender.Male;
    

    顺便说一下,你可以为每个枚举值生成小部件:

    children: <Widget>[
        for(var gender in Gender.values)
             Radio(
          value: gender,
          activeColor: Colors.black,
          groupValue: _gender,
          onChanged: (Gender value){
            setState(() {
              print(value);
              _gender = value;
            });
          },
        );
    ]
    

    确保您在 pubspec.yaml 中的最低 SDK 版本为 2.6.0 或更高版本

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-06-21
      • 1970-01-01
      • 2013-04-26
      • 2021-01-21
      • 2014-08-22
      • 2020-03-04
      相关资源
      最近更新 更多