Flutter中的单选按钮组件Radio

越陌度阡

发布于 2021-01-05 12:56:13

8.3K0

发布于 2021-01-05 12:56:13

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

Flutter 中的单选按钮组件有两种。

1. Radio

单选按钮，一般用来表现一些简单的信息。

常用属性如下：

(1). value 单选的值；

(2). onChanged 选择改变触发的事件；

(3). activeColor 选中时的颜色；

(4). groupValue 多个按钮选择组的值；

2. RadioListTile

包含更多信息的单选项，提供多种配置信息的属性，可以表现更丰富的信息。

常用的属性如下：

(1). value 单选的值；

(2). onChanged 选择改变触发的事件；

(3). activeColor 选中时的颜色；

(4). groupValue 多个按钮选择组的值；

(5). title 标题；

(6). subtitle 副标题；

(7). secondary 次要的；

3. 代码示例

import 'package:flutter/material.dart';


class RadioPage extends StatefulWidget {
    RadioPage({Key key}) : super(key: key);
    @override
    _RadioPageState createState() => _RadioPageState();
}

class _RadioPageState extends State<RadioPage> {

    int sex = 1;
    int status = 1;
    bool flag = true;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Radio"),
            ),
            body:Padding(
                padding: EdgeInsets.all(20),
                child:Column(
                    children: <Widget>[
                        // 简易选择项
                        Row(
                            children: <Widget>[
                                Text("男"),
                                Radio(
                                    // 按钮的值
                                    value: 1,
                                    // 改变事件
                                    onChanged: (value){
                                        setState(() {
                                          this.sex = value;
                                        });
                                    },
                                    // 按钮组的值
                                    groupValue:this.sex ,
                                ),

                                SizedBox(width: 20,),
                                Text("女"),
                                Radio(
                                    value:2,
                                    onChanged: (value){
                                        setState(() {
                                          this.sex = value;
                                        });
                                    },
                                    groupValue: this.sex,
                                ),
                            ],
                        ),

                        // 组合选择项1
                        RadioListTile(
                            value:1, 
                            groupValue:this.status, 
                            onChanged:(value){
                                setState(() {
                                    this.status = value;
                                });
                            },
                            title:Text("标题"),
                            subtitle:Text("这是二级标题"),
                            secondary:Icon(Icons.help),
                            selected:this.status == 1,

                        ),

                        // 组合选择项2
                        RadioListTile(
                            value:2, 
                            groupValue:this.status, 
                            onChanged:(value){
                                setState(() {
                                    this.status = value;
                                });
                            },
                            title:Text("标题"),
                            subtitle:Text("这是二级标题"),
                            secondary:Image.network('https://www.itying.com/images/flutter/1.png'),
                            selected:this.status == 2,
                        ),

            
                    ],
                )
            )
        );
    }
}

效果图如下：