Flutter如何增加Switch的高度和宽度？

Question

我正在制作一个单人和双人游戏。为了进行选择，我想要使用滑块样式，但是我尝试使用开关方法后，它看起来非常小。如何增加开关的高度和宽度？是否有任何方法可以创建类似于此的外观？

    new Center(
      child:
      new Padding(padding:EdgeInsets.all(50.00),
          child:
        new Column(
        mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Switch(value: _value, onChanged: (bool value1)

            {
              _value=value1;

            },
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              activeThumbImage: new AssetImage("assets/Images/1.png"),
              inactiveThumbImage: new AssetImage("assets/Images/1.png"),

            )
          ],
        )           ,
     ),
    )

- Kathir vtv

---

我也在寻找更新活动和非活动图像的方法，以使用画布/图片/图像，而不是必须使用本地资产图像或网络图像，你知道怎么做吗？ - Eradicatore

嗨，卡希尔！我认为你应该将diegoveloper的答案标记为正确，它非常有帮助。 - OlegBezr

Answer 1

你可以将你的Switch包装在一个Transform小部件中，并改变比例。

        Transform.scale(scale: 2.0,
                 child: Switch(
                          value: true,
                          onChanged: (bool value1){},
                        ),
                 )

比例尺为1是默认大小，0.5为一半大小，2.0为双倍大小，您可以玩弄这些数值 :)

更新

现在您也可以使用SizedBox + FittedBox来实现。

SizedBox(
        width: 150,
        height: 40,
        child: FittedBox(
          fit: BoxFit.fill,
          child: Switch(
            value: true,
            onChanged: (bool value1) {},
          ),
        ),
      ),

别忘了 BoxFit.fill 这个值 :)

- diegoveloper

---

解决方案很好。我之前使用的是SwitchListTile，但该解决方案也放大了标题，并使界面变得奇怪。不管怎样，+1，因为它解决了提出的问题。 - CopsOnRoad

Answer 2

尝试使用CupertinoSwitch，您可以复制粘贴下面的完整代码运行。 您可以使用Transform.scale并设置scale，其中1表示正常大小，0.8表示较小的大小。

Transform.scale(
  scale: 0.8,
  child: CupertinoSwitch(
    value: _switchValue,
    onChanged: (bool value) {
      setState(() {
        switchValue = value;
      });
    },
  ),
)

- P.J.Radadiya

Answer 3

使用比例尺的接受答案将同时增加高度和宽度，如果您想控制高度和宽度，请按以下方式使用。

          SizedBox(
            width: 50,
            height: 30,
            child: FittedBox(
              fit: BoxFit.fill,
              child: Switch(
                onChanged: (bool value) {
                },
              ),
            ),
          )
    

- ajay prabhakar

Answer 4

您可以将Switch小部件包装在SizedBox中，并设置其宽度和高度。

SizedBox(
  width: 80,
  height: 40,
  child: Switch(
    value: isChecked,
    onChanged: (value) {
      //Do you things
    }
  )
)

- Dongsheng Sun Noah

Answer 5

你应该将你的switch放在一个容器内，并根据你的需求给它一个高度和宽度。

- Parth Mandalia

Answer 6

您可以简单地使用更加兼容的 Container。

Flutter

Container(
                height: //whatever you want
                widget: //whatever you want
                child: Switch(
                    value: true, 
                    onChanged: (){

                }),
              )

- Nitin0310