当前位置：首页 > article >正文

Flutter 开关属性

article 2024/12/25 21:00:39

`Switch` 构造函数的样式

const Switch({
  Key? key,
  required this.value,           // 当前开关的状态，布尔值（true 表示打开，false 表示关闭）
  required this.onChanged,       // 状态切换时的回调函数，执行您定义的逻辑
  this.activeColor,              // 开关打开时圆形部分的颜色
  this.activeTrackColor,         // 开关打开时轨道的颜色
  this.inactiveThumbColor,       // 开关关闭时圆形部分的颜色
  this.inactiveTrackColor,       // 开关关闭时轨道的颜色
  this.activeThumbImage,         // 开关打开时圆形部分的图片
  this.inactiveThumbImage,       // 开关关闭时圆形部分的图片
  this.materialTapTargetSize,    // 调整触摸区域的大小
  this.dragStartBehavior = DragStartBehavior.start, // 控制拖动行为
});

`CupertinoSwitch` 构造函数的样式

const CupertinoSwitch({
  Key? key,                        // 小部件的唯一标识符
  required this.value,             // 当前开关的状态，布尔值，true 为打开，false 为关闭
  required this.onChanged,         // 当开关状态改变时的回调函数，接受新的状态 (bool) 作为参数
  this.activeColor = CupertinoColors.systemGreen, // 开关打开时，圆形部分的颜色（默认为绿色）
  this.trackColor,                 // 开关关闭时轨道的颜色（默认浅灰色，某些版本需要自行设置）
  this.thumbColor,                 // 开关滑块的颜色（默认为白色）
  this.dragStartBehavior = DragStartBehavior.start, // 拖动行为，定义用户如何开始拖动开关
});

CupertinoSwitch和Switch的区别

属性	`CupertinoSwitch`	`Switch`
平台风格	模拟 iOS 系统的开关样式，符合 iOS 设计规范	主要是 Android 风格的开关，符合 Material Design 规范
默认外观	具有 iOS 风格的滑块和轨道，滑块为圆形，整体呈现圆滑且简洁的外观	具有 Material Design 风格，开关较大，颜色和样式上更偏向 Android
外观定制	支持 `activeColor`、`trackColor`、`thumbColor`、`dragStartBehavior` 等定制项	支持 `activeColor`、`inactiveTrackColor`、`inactiveThumbColor`、`activeTrackColor`、`thumbColor` 等定制项
使用场景	通常在 iOS 风格的应用中使用	通常在 Android 风格的应用中使用或跨平台应用中使用
交互体验	更符合 iOS 的交互方式，支持滑动并且视觉上简洁	适合 Android 风格的交互，支持点击或拖动触发
位置	位于 `flutter/cupertino.dart` 包中	位于 `flutter/material.dart` 包中
自定义样式	`CupertinoSwitch` 的外观与默认值深度绑定，更难做到深度定制	`Switch` 更灵活，允许更详细的颜色、轨道、滑块样式定制

示例代码


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwitchDemo(),
    );
  }
}

class SwitchDemo extends StatefulWidget {
  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Switch 示例')),
      body: Center(
        child: Column(
          children: [
            Switch(
              value: _isSwitched,
              onChanged: (bool value) {
                setState(() {
                  _isSwitched = value;
                });
              },
              activeColor: Colors.green, // 打开时的颜色
              inactiveThumbColor: Colors.red, // 关闭时圆形部分的颜色
              inactiveTrackColor: Colors.grey, // 关闭时轨道的颜色
            ),
            CupertinoSwitch(
              value: _isSwitched,
              onChanged: (bool value) {
                setState(() {
                  _isSwitched = value;
                });
              },
              activeColor: CupertinoColors.activeGreen,
              trackColor: CupertinoColors.systemGrey,
            )
          ],
        ),
      ),
    );
  }
}