如何在颤动中更改 CupertinoSwitch 的大小？答案

【问题标题】：How to change CupertinoSwitch size in flutter?如何在颤动中更改 CupertinoSwitch 的大小？
【发布时间】：2020-01-29 12:07:17
【问题描述】：

我想在 Flutter 中更改 CupertinoSwitch 的大小。我试过把开关放在容器里，但是改变容器的大小并不会影响开关。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
您可以使用Transform.scale 并设置scale，1 表示正常尺寸，0.8 表示较小尺寸

代码sn-p

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

工作演示

完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: CupertinoSwitchDemo(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {    
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(        
        child: Column(          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

class CupertinoSwitchDemo extends StatefulWidget {
  static const String routeName = '/cupertino/switch';

  @override
  _CupertinoSwitchDemoState createState() => _CupertinoSwitchDemoState();
}

class _CupertinoSwitchDemoState extends State<CupertinoSwitchDemo> {

  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Switch'),
        // We're specifying a back label here because the previous page is a
        // Material page. CupertinoPageRoutes could auto-populate these back
        // labels.
        previousPageTitle: 'Cupertino',
        //trailing: CupertinoDemoDocumentationButton(CupertinoSwitchDemo.routeName),
      ),
      child: DefaultTextStyle(
        style: CupertinoTheme.of(context).textTheme.textStyle,
        child: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Semantics(
                  container: true,
                  child: Column(
                    children: <Widget>[
                      Transform.scale(
                        scale: 0.8,
                        child: CupertinoSwitch(
                          value: _switchValue,
                          onChanged: (bool value) {
                            setState(() {
                              _switchValue = value;
                            });
                          },
                        ),
                      ),
                      Text(
                          "Enabled - ${_switchValue ? "On" : "Off"}"
                      ),
                    ],
                  ),
                ),
                Semantics(
                  container: true,
                  child: Column(
                    children: const <Widget>[
                      CupertinoSwitch(
                        value: true,
                        onChanged: null,
                      ),
                      Text(
                          'Disabled - On'
                      ),
                    ],
                  ),
                ),
                Semantics(
                  container: true,
                  child: Column(
                    children: const <Widget>[
                      CupertinoSwitch(
                        value: false,
                        onChanged: null,
                      ),
                      Text(
                          'Disabled - Off'
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

很高兴为您提供帮助。如果对您有帮助，请将其标记为答案。谢谢。
它有效，谢谢！只是我觉得谷歌忽略了库比蒂诺的假发。这不是更好的方法吗？

【解决方案2】：

接受的答案几乎可以解决您需要的所有问题。但是请记住，如果您使用Transform.scale 使您的小部件更小，您仍然拥有与缩放之前小部件相同的不可见空间。这意味着：即使您缩放 Switch，它仍然占据原始大小。一个解决方法就是用一个容器包裹它并给它一个所需的宽度和高度。

注意：缩放Switch 后，为了不在执行命中测试时应用转换，请将transformHitTests 设置为false。这样您就可以更轻松地控制可以点击或单击的区域。

                      Container(
                        color: Colors.red,
                        height: 30, //set desired REAL HEIGHT
                        width: 35, //set desired REAL WIDTH
                        child: Transform.scale(
                          transformHitTests: false,
                          scale: .5,
                          child: CupertinoSwitch(
                            value: switchValue,
                            onChanged: (value) {
                              setState(() {
                                switchValue = value;
                              });
                            },
                            activeColor: Colors.green,
                          ),
                        ),
                      ),

【讨论】：