Flutter：有没有关于Offset的好教程？

f4t66c6m 于 2023-10-22 发布在 Flutter

关注(0)|答案(2)|浏览(123)

我想学习更多关于偏移的知识，我在谷歌上搜索了一下，发现很少有教程。我发现这个教程https://blog.logrocket.com/understanding-offsets-flutter/，但有点复杂。我在某个地方了解到，它是从屏幕中心偏移（0，0）（使用Offset（dx，dy））表示的，例如：

偏置（1，0）是中间偏右
偏移量（-1，0）为中间偏左
偏移（0，1）是底部中心
Offset（0，-1）是顶部中心，但我还有其他Offset（30，20）的例子。我迷路了，用什么单位表示？是否取决于widget的类型？有没有简单的教程？谢谢你，谢谢！

flutter

来源：https://stackoverflow.com/questions/77322077/flutter-is-there-a-good-tutorial-on-offset

2条答案

按热度按时间

4c8rllxm1#

理解Offset、Alignment、Rect和Size都非常重要。我不时地花一些时间回顾他们的协议，当我必须处理Stack中的Positioned小部件或用CustomPainter在画布上绘画时，这是值得的。
我很害怕看到所有这些绘画应用程序都把x和y作为变量对来处理，而不是使用自配对的偏移量和数学。特别酷的是Offset.fromDirection，它可以进行极坐标到直角坐标的计算，这意味着你不必记住你的时间来布置钟面。

赞(0）回复(0）举报 2023-10-22

sqxo8psd2#

Offset的功能完全取决于它所使用的Widget。查看完整示例：

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: OffSetTest(),
    ));

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            OffSetBox(dx: 0, dy: 0, color: Colors.red),
            OffSetBox(dx: 1, dy: 1, color: Colors.green),
            OffSetBox(dx: 2, dy: 2, color: Colors.blue),
            OffSetBox(dx: 3, dy: 3, color: Colors.yellow),
            OffSetBox(dx: 4, dy: 4, color: Colors.purple),
          ],
        ),
      ),
    );
  }
}

class OffSetBox extends StatelessWidget {
  final double dx;
  final double dy;
  final Color color;

  const OffSetBox(
      {super.key, required this.dx, required this.dy, required this.color});

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(dx, dy),
      child: Container(
        width: 100,
        height: 100,
        color: color,
        child: Text('$dx, $dy'),
      ),
    );
  }
}

这里我们在Transform.translate中使用它，在Offset中使用的值等于它将被移动的像素数，所以你得到这样的输出：

如果我们用FractionalTranslation代替它，就像这样：

class OffSetBox extends StatelessWidget {
  final double dx;
  final double dy;
  final Color color;

  const OffSetBox(
      {super.key, required this.dx, required this.dy, required this.color});

  @override
  Widget build(BuildContext context) {
    return FractionalTranslation(
      translation: Offset(dx, dy),
      child: Container(
        width: 100,
        height: 100,
        color: color,
        child: Text('$dx, $dy'),
      ),
    );
  }
}

我们使用相同的偏移量得到这个：

在这里，它根据自己的大小变化。
比如FractionalOffset s。举例来说：

class OffSetBox extends StatelessWidget {
  final double dx;
  final double dy;
  final Color color;

  const OffSetBox(
      {super.key, required this.dx, required this.dy, required this.color});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: FractionalOffset(dx, dy),
      child: Container(
        width: 500,
        height: 500,
        color: color,
        child: Text('$dx, $dy'),
      ),
    );
  }
}