如何根据颤动中的不同屏幕尺寸对齐堆栈内的小部件

Question

您好，我遇到了一个小问题。我想在堆栈小部件内的屏幕上对齐我的浮动按钮。我不能做的是根据不同手机的屏幕尺寸动态对齐它。如果我将它与我的模拟器中的所需位置对齐，当你在我的设备上运行它时，它会从原来的位置分散。我使用了带有 top: 、 right: 等属性的 Positioned() 小部件，还尝试了带有 margin: 属性的 Container() 和 Align() 小部件，但似乎没有任何效果。下面是可能有帮助的屏幕截图和代码。

return Scaffold(
  body: Stack(
    children: <Widget>[
      ....
     Container(
        margin: EdgeInsets.only(bottom: 277, right: 10),
        alignment: Alignment.bottomRight,
        child: showFloatingBtn2 ? SpeedoMeterFloatingBtn() : SizedBox(),
      ),
    ],
  ),
);

如果您看到 image1，您会看到红色浮动按钮位置不正确，我的问题是，当我将其放置在模拟器上的图像 2 中时，它在我的设备上不对齐，反之亦然。我无法弄清楚如何解决这个问题。任何形式的帮助将不胜感激。提前致谢。

注意：Image1 在模拟器上为 bottom:227，而 image2 在模拟器上为 bottom:277。

Answer 1

我不确定这是否是您想要的，但您可以尝试在 Stack 中使用 Transform.translate 小部件来稍微偏移图标按钮

在这里查看示例https://dartpad.dartlang.org/59a39d191234f84cd250fafded43cfda

这样，无论屏幕分辨率如何，按钮都将始终位于底部卡片的边缘。

完整示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoPage(),
    );
  }
}


class DemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/3/3a/Official_New_York_City_Subway_Map_vc.jpg',
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 30),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.keyboard_arrow_left,
                          ),
                          Text(
                            '45',
                            style: TextStyle(fontSize: 30),
                          ),
                          Icon(
                            Icons.keyboard_arrow_right,
                          ),
                        ],
                      ),
                      Container(
                        height: 150,
                        child: Placeholder(),
                      )
                    ],
                  ),
                ),
                Align(
                  alignment: AlignmentDirectional.centerEnd,
                  child: Transform.translate(
                    offset: Offset(0, -20),
                    child: FlatButton(
                      child: Icon(Icons.play_arrow, size: 28),
                      shape: CircleBorder(),
                      color: Colors.red,
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 2

可以使用screen util包https://pub.dev/packages/flutter_screenutil

它是处理多个屏幕的最佳软件包 它只是使所有屏幕具有相同的分辨率，然后通过简单的扩展，您可以指定宽度高度或文本大小，它将扩展到不同的屏幕没问题[可能是小问题]

你只需要在你的构建方法中初始化它[对于我认为的每条路线]

//默认值：宽度：1080px，高度：1920px，allowFontScaling:false

ScreenUtil.init(context);

我建议在 pubspec.yaml 中将 dart sdk 设置为 2.7 以使用扩展功能

environment:
  sdk: ">=2.7.0 <3.0.0"

能够做到这一点

Container(
width: 50.w,
height:200.h
)

在文档中阅读更多信息 试试看，真棒