flutter - 对齐小部件的中心

Question

我希望灰色框的中心使用对齐小部件位于黑色像素处。（两者都具有相同的 Alignment(-0.6, -0.6)）

Positioned.fill 在我的情况下是需要的。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Stack(children: <Widget>[
      Positioned.fill(
        child: Align(
            alignment: Alignment(-0.6, -0.6),
            child: Container(
              height: 48,
              width: 48,
              color: Colors.grey[300],
            )),
      ),
      Positioned.fill(
        child: Align(
            alignment: Alignment(-0.6, -0.6),
            child: Container(
              height: 1,
              width: 1,
              color: Colors.black,
            )),
      )
    ])));
  }
}

标签： flutterdart

Answer 1

Flutter Align 的工作原理

对齐小部件，Alain 对象在他的父级上......当您Alignment(0,0)将此对象的中心位置设置在他的父级的中心时。（下图）

当你设置Alignment(1,0)你设置x = 1这意味着这个对象的正确位置在他的父母的右边。（下图）

所以大物体的移动速度比小物体慢，因为它们的方式更短。

例如，如果我们的屏幕是 100px in 100px 并且我们有一个 90px in 90px 的对象。如果我们将对齐从这个对象Alignment(0,0)移动Alignment(1,0)多少像素？只有 5 个像素。 ((100 - 90)/2 = 5)

在这个例子中，如果我们的对象大小是 1px in 1px，答案是什么？~= 50 像素 ((100 - 1)/2 = 49.5)

---

现在你能做什么？

1. 计算设备的像素和....（我不喜欢这种方式）

2. 使用Composite Transform Follower和Composite Transform Target

Composite Transform Follower我为和写了一个例子Composite Transform Target

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
 @override
State<StatefulWidget> createState() {
// TODO: implement createState
return ssMyApp();
}
}

class ssMyApp extends State<MyApp> {
 LayerLink mylink = new LayerLink();

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
     home: Scaffold(
        body: Stack(children: <Widget>[
      Positioned.fill(
      child: Align(
        alignment: Alignment(-0.6, -0.6),
        child: CompositedTransformTarget(
        link: mylink,
        child: Container(
          height: 48,
          width: 48,
          color: Colors.grey[300],
        ),
      ),
    ),
  ),
  Positioned.fill(
    child: Center(
      child: CompositedTransformFollower(
        link: mylink,
        offset: Offset(0.5, 0.5),
        child: Padding(
          padding: const EdgeInsets.only(top: 24, left: 24),
          child: Container(
            height: 1,
            width: 1,
            color: Colors.black,
          ),
        ),
      ),
    ),
  )
])));
}
}