Flutter：如何缩放一个小部件，使其垂直线与另一个小部件对齐

Question

我认为它与 origin 参数有关，但我没能成功：

这是我的代码（还有它的飞镖垫：https://dartpad.dev/?id=1ef23afddb2d4f73744941b1d5493047）：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Scale the scene to the red line'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  final double originRatio = 1/4;

  Widget scene({required Size size, required Color color}) {
    return Stack(children:[
        Positioned(left:0,top:0, child: SizedBox(
          width: size.width,
          height: size.height, child: Container(color: color))
        ),
        Positioned(left:size.width*originRatio,top:0, child: SizedBox(
          width: 10,
          height: size.height, child: Container(color: Colors.red))
        ),
      ]);
  }

  @override
  Widget build(BuildContext context) {
    
    const sceneSize = Size(400,200);
    const scale = 0.8;
    final origin = Offset(-sceneSize.width*originRatio*scale,0);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(children: [
     
        // == Scaled
        Transform.scale(
          scale: scale,
          origin: origin,
          child: scene(size: sceneSize, color: Colors.brown)
        ),
        
        // == Not scaled
        scene(size: sceneSize, color: Colors.amber)
      ])
    );
  }
}

Answer 1

我正在使用 Positioned 小部件来对齐 Transform 小部件。我正在使用的左计算，

  double getLeftP() {
    return sceneSize.width * (1 - scale) * originRatio +
        (10 * .5 * (1 - scale)); //10 for red width
  }

它看起来工作得非常完美。

默认Stack和Transform.scale居中对齐，我也改成左对齐了。 Stack 小部件需要大小，而您已经定义了场景大小我正在使用它并检查响应能力我需要添加另一个滑块来检查它。

运行在 dartPad.

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final double originRatio = 1 / 4;

  Widget scene({required Size size, required Color color}) {
    return SizedBox(
      width: size.width,
      height: size.height,
      child: Stack(alignment: Alignment.centerLeft, children: [
        Positioned(
          left: 0,
          top: 0,
          child: SizedBox(
            width: size.width,
            height: size.height,
            child: Container(color: color),
          ),
        ),
        Positioned(
          left: size.width * originRatio,
          top: 0,
          child: SizedBox(
            width: 10,
            height: size.height,
            child: Container(color: Colors.red),
          ),
        ),
      ]),
    );
  }

  final sceneSize = const Size(400, 200);

  double scale = 0.3;

  double getLeftP() {
    return sceneSize.width * (1 - scale) * originRatio +
        (10 * .5 * (1 - scale)); //10 for red width
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Slider(
            value: scale,
            onChanged: (value) {
              setState(() {
                scale = value;
              });
            },
          ),
          SizedBox(
            height: sceneSize.height,
            width: sceneSize.width,
            child: Stack(
              alignment: Alignment.centerLeft,
              children: [
                // == Not scaled
                scene(size: sceneSize, color: Colors.amber),

                // == Scaled
                Positioned(
                  left: getLeftP(),
                  child: Transform.scale(
                    alignment: Alignment.centerLeft,
                    scale: scale,
                    child: scene(
                      size: sceneSize,
                      color: Colors.brown,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Flutter：如何缩放一个小部件，使其垂直线与另一个小部件对齐

Flutter: how to scale a widget so that it aligns its vertical line to the other widget

transform

scale

flutter