如何在 Flutter 中将 widget 与另一个 widget 对齐

Question

这就是我想要实现的UI

大家好，我是 Flutter 新手，我有一个问题，如何创建一个像图中那样的 UI，由通过箭头连接的两个图像组成？ 我使用过

Positioned 

小部件，但我不确定如何正确定位箭头以匹配设计。有人可以帮我解决这个问题吗？谢谢你。

Answer 1

您可以执行以下操作：

• 使用

  Row

  来放置你的卡片。
• 使用

  Transform.rotate

  旋转你的卡片。
• 使用

  Stack

  并将

  Row

  和

  Image

  放入其中。

结果：

代码：

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

  @override
  Widget build(BuildContext context) {
    const arrowSize = 50.0;

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Center(child: LayoutBuilder(builder: (context, constraints) {
          final width = constraints.maxWidth * 0.4;
          return Stack(
            clipBehavior: Clip.none,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Transform.rotate(
                    angle: pi / 20,
                    child: Container(
                      width: width,
                      height: width,
                      decoration: const BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                    ),
                  ),
                  Transform.rotate(
                    angle: pi / 20,
                    child: Container(
                      width: width,
                      height: width,
                      decoration: const BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                    ),
                  )
                ],
              ),
              Positioned(
                left: constraints.maxWidth / 2 - arrowSize / 2,
                top: -arrowSize / 2,
                child: Image.network(
                  'https://i.pinimg.com/564x/e1/dd/4a/e1dd4a304f0ad506a4dde90bf6d393f0.jpg',
                  width: arrowSize,
                ),
              ),
            ],
          );
        })),
      ),
    );
  }
}

只需为箭头使用更好的图像（透明背景）。