对齐小部件的中心

Question

我希望使用[对齐]小部件将灰色框的中心置于黑色像素。 （都具有相同的对齐方式（-0.6，-0.6））

已定位。在我的情况下需要填写。

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,
            )),
      )
    ])));
  }
}

Answer 1

Flutter Align如何工作

对齐小部件，将Alain对象放置在其父对象上...，然后将Alignment(0,0)设置为该对象的居中位置，将其放置在其父对象的中心。（下图）

设置Alignment(1,0)时设置x = 1，这意味着该对象在其父母的右边的正确位置。（下图）

大对象的移动速度比小对象慢，因为它们的移动距离更短。

例如，如果我们的屏幕是100像素x 100像素，而我们有一个90像素像素是90 px。 如果我们将“对齐”从Alignment(0,0)更改为Alignment(1,0)，则此对象移动了多少像素？ 仅5个像素。（（100-90）/ 2 = 5）

在此示例中，如果我们的对象大小为1px中的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,
          ),
        ),
      ),
    ),
  )
])));
}
}

Answer 2

我找到了涉及 align_positioned 软件包的解决方案，但是，如果有不涉及软件包的解决方案，我仍然很高兴知道。

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