如何在 Flutter 中处理不同屏幕尺寸上的定位元素（在堆栈中）？

Question

以下是包含堆栈和一些定位小部件的代码。

       Stack(
            children: [

              Positioned(
                top: 50,
                bottom: 0,
                left: 30,
                child: Text(
                  'Mon-Sat',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              Positioned(
                top: 70,
                bottom: 0,
                left: 30,
                child: Text(
                  '11:00 PM',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              Positioned(
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
                child: Image.asset(Images.calendar),
              ),
            ],
          )

现在这个 UI 代码在特定的 6 英寸屏幕上运行良好，但在较小的屏幕上，定位的元素会改变它们的位置（如预期的那样）。

那么，我如何在不同的屏幕尺寸上处理这个定位元素

Answer 1

您可以找到您的应用运行的屏幕的高度和宽度，然后从顶部、左侧、高度和宽度指定相对位置。下面的代码演示了 MediaQuery.of(context).size 的使用，您可以通过它找到屏幕的宽度和高度。

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) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    double side = height * 0.10;
    
    return Stack(
      children: [
        Positioned(
          top: height * 0.10,
          left: width * 0.10,
          child: Container(height: side, width: side, color: Colors.red),
        ),
       Positioned(
          top: height * 0.10,
          left: width * 0.70,
          child: Container(height: side, width: side, color: Colors.green),
        ),
        Positioned(
          top: height * 0.70,
          left: width * 0.70,
          child: Container(height: side, width: side, color: Colors.red),
        ),
       Positioned(
          top: height * 0.70,
          left: width * 0.10,
          child: Container(height: side, width: side, color: Colors.green),
        ),        
      ],
    );
  }
}