Flutter：如何縮放小部件，使其垂直線與其他小部件對齊

我相信它與 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)
      ])
    );
  }
}

uj5u.com熱心網友回復：

我正在使用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中的json.decode到List<Map<String,dynamic>>問題

下一篇：顫振正則運算式