面试题：Flutter中Stack布局如何实现元素的相对定位

Question

在Flutter的Stack布局中，描述一下如何使用Positioned组件来实现子元素相对于Stack的上、下、左、右等位置的定位，并且给出一个简单示例代码，展示将一个文本组件定位在Stack右上角的实现过程。

Answer 1

在Flutter的Stack布局中，Positioned组件用于在Stack中定位子元素。它通过top、bottom、left、right属性来指定子元素相对于Stack的位置。

• top：子元素顶部距离Stack顶部的距离。
• bottom：子元素底部距离Stack底部的距离。
• left：子元素左侧距离Stack左侧的距离。
• right：子元素右侧距离Stack右侧的距离。

以下是将一个文本组件定位在Stack右上角的示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Positioned Example'),
        ),
        body: Stack(
          children: [
            Positioned(
              top: 0,
              right: 0,
              child: Text('右上角'),
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，我们创建了一个包含Stack的Scaffold。在Stack中，通过Positioned组件将Text组件定位在Stack的右上角，即设置top为0（距离顶部0像素），right为0（距离右侧0像素）。