我想知道如何在flutter中缩放子控件

Question

我应用了 Transform.scale，但宽高比被破坏并且按钮弹出。我想知道如何在不破坏所有子部件的情况下缩放它们。

我尝试过设置容器的宽度和高度，并尝试使用 AspectRatio 对其进行扭曲。但是当我改变Chrome的大小时它总是坏掉。

已添加

我想要适合屏幕。基本尺寸为 590x830。 当我更改为低于基本尺寸时，它就损坏了。

class TestApp extends StatelessWidget {
  const TestApp({super.key});

  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  const TestPage({super.key});

  @override 
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    var width = screenSize.width;
    var height = screenSize.height;
    var scaleW = width / 590;
    var scaleH = height / 830;
    var scaleFit = scaleW < scaleH ? scaleW : scaleH;
    //scaleFit = 1;
    print('$width, $height, $scaleW, $scaleH, $scaleFit');

    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/white.png'),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Align(
          alignment: Alignment.center,
          child: Transform.scale(
            scale: scaleFit,
            child: TestMenu(),
          ),
        ),
      ),
    );
  }
}


class TestMenu extends StatelessWidget {
  const TestMenu({super.key});

  @override 
  Widget build(BuildContext context) {
    return Container(
      width: 590, 
      height: 830, 
      color: Colors.black.withOpacity(0.2),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
    
          Container(
            width: 590, 
            height: 80, 
            color: Colors.red.withOpacity(0.2),
            child: Text('Title', style: TextStyle(fontSize: 72,),),
          ),
    
          Container(
            width: 590, 
            height: 660, 
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/box.png'),
                centerSlice: Rect.fromLTRB(8, 8, 24, 24),
              ),
            ),
            child: Text('Menu Items', style: TextStyle(fontSize: 72,),),
          ),

          Container(
            width: 590, 
            height: 90, 
            color: Colors.green.withOpacity(0.2),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                InkWell(onTap: (){}, 
                  child:Image.asset('assets/box.png',
                    width: 166, height: 60, 
                    centerSlice: Rect.fromLTRB(8, 8, 24, 24),
                  ),
                ),
                InkWell(onTap: (){}, 
                  child:Image.asset('assets/box.png',
                    width: 166, height: 60, 
                    centerSlice: Rect.fromLTRB(8, 8, 24, 24),
                  ),
                ),
                InkWell(onTap: (){}, 
                  child:Image.asset('assets/box.png',
                    width: 230, height: 90, 
                    centerSlice: Rect.fromLTRB(8, 8, 24, 24),
                  ),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

Answer 1

您可以轻松使用Flutter本身提供的ScaleTrantion Widget。

查看this以了解scaleTrantion

如果您遇到任何问题，请告诉我

编码快乐:)