Flutter单选按钮不显示已被选中

时间:2020-07-16 09:59:25

标签: android ios flutter flutter-layout

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

    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),)
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:2)

它不起作用,因为您在build函数中声明了状态。将其移出:

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或更高版本