Flutter-Switch

Flutter-Switch 1. 开关组件

---

• 开关组件通常是作为和用户交互有关的组件，因此，在使用时，一般是作为有状态的组件来使用

  //普通开关按钮
  Switch(
      value:switchEnable,
      activeColor: Colors.blue,//选中的时候颜色
      inactiveTrackColor: Colors.blue.shade50,//选中前颜色
      onChanged: (value){
          setState(() {
              switchEnable = value;
          });
      },
  ),
  

  //IOS风格的开关按钮
  CupertinoSwitch(
  	value: iosswitchSelected,
  	onChanged: (value) {},
  ),
  

  //带Icon、Text的开关按钮
  SwitchListTile(
      secondary: const Icon(Icons.shutter_speed),
      title: const Text('硬件加速'),
      value: switchSelected,
      onChanged: (bool value) {
          setState(() {
          	switchSelected = !switchSelected;
          });
      },
  ),
  

2. 复选框组件

---

• 复选框组件同样常用有状态组件来使用

//普通checkbox
Checkbox(
    value: checkboxSelected,
    onChanged: (value) {
        setState(() {
            checkboxSelected = value;
        });
    },
),

//带Icon、Text的checkbox
CheckboxListTile(
    secondary: const Icon(Icons.shutter_speed),
    title: const Text('硬件加速'),
    value: checkboxTextSelected,
    onChanged: (bool value) {
        setState(() {
        	checkboxTextSelected = !checkboxTextSelected;
        });
    },
),

3. 共有属性

---

• Flutter框架对开关和复选框的样式定义很少，主要有以下几个

activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。
value → bool - 切换按钮的值。

代码样式

---

源码

---

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: SwitchAndCheckBoxArea(),
        ),
      ),
    );
  }
}

class SwitchAndCheckBoxArea extends StatefulWidget{
  @override
  State createState(){
    return SwitchAndCheckBoxAreaState();
  }
}

class SwitchAndCheckBoxAreaState extends State {
  @override
  Widget build(BuildContext context){
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          WidgetSwitchAndCheckbox(),
        ],
      ),
    );
  }
}

//开关和复选框组件
class WidgetSwitchAndCheckbox extends StatefulWidget {
  @override
  State createState(){
    return WidgetSwitchAndCheckboxState();
  }
}

class WidgetSwitchAndCheckboxState extends State {

  var switchEnable = false;
  var checkboxSelected = false;
  var switchSelected = false;
  var checkboxTextSelected = false;
  var iosswitchSelected = false;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      //普通开关按钮
      Switch(
        value:switchEnable,
        activeColor: Colors.blue,//选中的时候颜色
        inactiveTrackColor: Colors.blue.shade50,//选中前颜色
        onChanged: (value){
          setState(() {
            switchEnable = value;
          });
        },
      ),
      //IOS风格的开关按钮
      CupertinoSwitch(
        value: iosswitchSelected,
        onChanged: (value) {},
      ),
      //带Icon、Text的开关按钮
      SwitchListTile(
        secondary: const Icon(Icons.shutter_speed),
        title: const Text('硬件加速'),
        value: switchSelected,
        onChanged: (bool value) {
          setState(() {
            switchSelected = !switchSelected;
          });
        },
      ),
      //普通checkbox
      Checkbox(
        value: checkboxSelected,
        onChanged: (value) {
          setState(() {
            checkboxSelected = value;
          });
        },
      ),
      //带Icon、Text的checkbox
      CheckboxListTile(
        secondary: const Icon(Icons.shutter_speed),
        title: const Text('硬件加速'),
        value: checkboxTextSelected,
        onChanged: (bool value) {
          setState(() {
            checkboxTextSelected = !checkboxTextSelected;
          });
        },
      ),

    ]);
  }
}