首页 > 解决方案 > Flutter中如何自定义开关让圆圈相对变小?

问题描述

这是必需的开关 必需/预期的开关

我正在使用颤振的 Switch 小部件来执行此操作,但我无法更接近所需的开关。使用 Transform 来增加交换机的大小但会增加整个交换机的大小。关于如何匹配给定图像的任何想法?这就是我所在的地方: 我所在的地方

标签: flutterdartswitch-statement

解决方案


Switch部件使用自适应模式,如果您查看源代码,您会发现如下内容:

  @override
  Widget build(BuildContext context) {
    switch (widget._switchType) {
      case _SwitchType.material:
        return buildMaterialSwitch(context);

      case _SwitchType.adaptive: {
        final ThemeData theme = Theme.of(context);
        assert(theme.platform != null);
        switch (theme.platform) {
          case TargetPlatform.android:
          case TargetPlatform.fuchsia:
            return buildMaterialSwitch(context);
          case TargetPlatform.iOS:
            return buildCupertinoSwitch(context);
        }
      }
    }
    assert(false);
    return null;
  }
}

它将使用适用于 iOS的buildMaterialSwitch方法。AndroidbuildCupertinoSwitch

检查buildCupertinoSwitch方法:

  Widget buildCupertinoSwitch(BuildContext context) {
    final Size size = getSwitchSize(Theme.of(context));
    return Container(
      width: size.width,  // Same size as the Material switch.
      height: size.height,
      alignment: Alignment.center,
      child: CupertinoSwitch(
        dragStartBehavior: widget.dragStartBehavior,
        value: widget.value,
        onChanged: widget.onChanged,
        activeColor: widget.activeColor,
      ),
    );
  }

这是关键,那么你必须使用CupertinoSwitch小部件:),只是不要忘记添加导入:

import 'package:flutter/cupertino.dart';

推荐阅读