Flutter 如何在屏幕上相对于另一个小部件放置一个小部件？

Question

我想在屏幕中央放置一个画板小部件，并在画板正上方放置一个清除按钮。 我已经尝试使用 MainAxisAlignment.center 列，但它以电路板和清除按钮为中心，因此电路板并非绝对位于中心。 我怎样才能达到这种效果？

Answer 1

您可以使用 positioned with stack 并放置在任何您想要的地方。 在 dartpad 中复制并尝试此代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
    children: [
       Positioned(
         top: 100,
         child: Container(
           width: MediaQuery.of(context).size.width,
           height: 250, color: Colors.yellow)),
       Positioned(
         top: 60,
         right: 20, 
         child: Icon(Icons.close, size: 32)),
    ]
    );
  }
}

Answer 2

这是一个带有Column小部件的类似 UI，您可以在Column内的黄色框下方添加一个SizedBox ，其高度与Icon相同，以便黄色框看起来居中。

因此，我们可以避免在Positioned小部件中硬编码值（这会影响响应式 UI）

这是代码片段。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double iconSize = 32;
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(
        alignment: Alignment.centerRight,
        height: iconSize,
        child: Icon(Icons.close, size: iconSize),
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        height: 250,
        color: Colors.yellow,
      ),
      SizedBox(height: iconSize)
    ]);
  }
}