Flutter——Radio組件、RadioListTile組件（單選按鈕組件）

• Radio組件

Radio組件的常用屬性：

屬性	描述
value	單選的值
onChanged	改變時觸發
activeColor	選中的顏色、背景顏色
groupValue	選擇組的值

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Radio",
    home: MyApp(),
  ));
}


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  int sex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Radio")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("男："),
              Radio(
                value: 1,
                groupValue: this.sex,
                onChanged: (value) {
                  setState(() {
                    this.sex = value;
                  });
                },
              ),
              SizedBox(width: 20),
              Text("女："),
              Radio(
                value: 2,
                groupValue: this.sex,
                onChanged: (value) {
                  setState(() {
                    this.sex = value;
                  });
                },
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("你選擇的是${this.sex == 1 ? "男" : "女"}")
            ],
          )
        ],
      ),
    );
  }
}

 

•  RadioListTile組件

RadioListTile組件常用的屬性：

屬性	描述
value	true 或者 false
onChanged	改變的時候觸發的事件
activeColor	選中的顏色、背景顏色
title	標題
subtitle	二級標題
secondary	配置圖標或者圖片
groupValue	選擇組的值

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "RadioListTile",
    home: MyApp(),
  ));
}


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  int sex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("RadioListTile")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RadioListTile(
            value: 1,
            onChanged: (value) {
              setState(() {
                this.sex = value;
              });
            },
            groupValue: this.sex,
            title: Text("一級標題"),
            subtitle: Text("二級標題"),
            secondary: Icon(Icons.camera),
            selected: this.sex == 1,
          ),
          RadioListTile(
            value: 2,
            onChanged: (value) {
              setState(() {
                this.sex = value;
              });
            },
            groupValue: this.sex,
            title: Text("一級標題"),
            subtitle: Text("二級標題"),
            secondary: Icon(Icons.palette),
            selected: this.sex == 2,
          ),
        ],
      ),
    );
  }
}