Radio 单选按钮

属性 说明
value 设置单选按钮表示的值
onChange 监听选中
activeColor 设置单选按钮选中时的颜色

当groupValue与value值一致,认为被选中。

在这里插入图片描述

void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(theme: ThemeData(), home: RadioFul());
  }
}

class MyState extends State {
  var sex = "男";

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("性格"), centerTitle: true),
      body: Row(
        children: [
          Text("请选择性别:"),
          Radio(
            value: "男",
            groupValue: sex,
            onChanged: (value) {
              setState(() {
                sex = "男";
              });
            },
          ),
          Text("男"),
          Radio(
            value: "女",
            groupValue: sex,
            onChanged: (value) {
              setState(() {
                sex = "女";
              });
            },
          ),
          Text("女"),
          Text("  选择的性别:$sex")
        ],
      ),
    );
  }
}

class RadioFul extends StatefulWidget {
  
  State<StatefulWidget> createState() {
    return MyState();
  }
}

RadioListTile

属性 说明
title 设置主标题
subtitle 设置副标题
dense 设置是否垂直密集 显示标题
controlAffinity 选中相对于文字的位置,取值leading,plaform,trailing

在这里插入图片描述

void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(theme: ThemeData(), home: RadioFul());
  }
}

class MyState extends State {
  int selected = -1;

  List<String> list = ["Java", "Swift", "Dart", "Kotlin"];

  //A. Java B. Swift C. Dart D. Kotlin

  
  Widget build(BuildContext context) {
    Column column = Column(
      children: [
        Text("Flutter使用的编程语言是()"),
        RadioListTile(
          title: Text("A."),
          subtitle: Text(list[0]),
          value: 0,
          groupValue: selected,
          onChanged: (value) {
            setState(() {
              selected = value!;
            });
          },
        ),
        RadioListTile(
          title: Text("B."),
          subtitle: Text(list[1]),
          value: 1,
          groupValue: selected,
          onChanged: (value) {
            setState(() {
              selected = value!;
            });
          },
        ),RadioListTile(
          title: Text("C."),
          subtitle: Text(list[2]),
          value: 2,
          groupValue: selected,
          onChanged: (value) {
            setState(() {
              selected = value!;
            });
          },
        ),
        RadioListTile(
          title: Text("D."),
          subtitle: Text(list[3]),
          value: 3,
          groupValue: selected,
          onChanged: (value) {
            setState(() {
              selected = value!;
            });
          },
        ),
        Text("你的选择:$selected")
      ],
    );

    return Scaffold(
      appBar: AppBar(title: Text("单选题"), centerTitle: true),
      body: column,
    );
  }
}

class RadioFul extends StatefulWidget {
  
  State<StatefulWidget> createState() {
    return MyState();
  }
}
Logo

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。

更多推荐