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

Question

我想在颤动中更改 CupertinoSwitch 的大小。我曾尝试将开关放在 Container 中，但更改容器的大小不会影响开关。

Answer 1

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

代码片段

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'
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 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,
                          ),
                        ),
                      ),

Answer 3

使用Transform.scale确实是一种很好的方法，但可能会给您在屏幕上设计或排列小部件带来一些麻烦。因此，您可以将CupertinoSwitch包装在FittedBox中，该 FittedBox 位于另一个Container内，从而使您可以更好地控制您的小部件。

您可以复制粘贴以下代码，只需设置高度和宽度并将FittedBox设为BoxFit.contain。

        Container(
                      height: 200.0,
                      width: 200.0,
                      child: FittedBox(
                        fit: BoxFit.contain,
                        child: CupertinoSwitch(
                          value: _switchValue,
                          onChanged: (value) {
                             setState(() {
                          _switchValue = value;
                        });
                          },
                        ),
                      ),
                    ),