Flutter中的开关组件Switch

越陌度阡

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

1.8K0

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

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

Flutter中用Switch来表示开关组件。

主要属性如下：

1. value 选中时的值；

2. onChanged 改变时触发的事件；

3. activeColor 选中时的颜色；

代码示例：

import 'package:flutter/material.dart';


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

class _SwitchPageState extends State<SwitchPage> {

    bool flag = true;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Switch"),
            ),
            body:Padding(
                padding: EdgeInsets.all(20),
                child:Column(
                    children: <Widget>[

                        Row(
                            children: <Widget>[
                                SizedBox(height:40),
                                // 按钮开关
                                Switch(
                                    value: this.flag, 
                                    onChanged: (value){
                                        setState(() {
                                            this.flag = value;
                                        });
                                    }
                                )
                            ]
                        )
                    ],
                )
            )
        );
    }
}

效果图如下：