Question

您好，我遇到了一个小问题。我想在堆栈小部件内的屏幕上对齐我的浮动按钮。我无法执行的操作是根据不同手机的屏幕尺寸进行动态调整。如果我将其对准模拟器中的所需位置，则当您在设备上运行它时，它会从其原始位置分散开。我使用了具有top：，right：等属性的Positioned（）小部件，还尝试了margin：属性和Align（）小部件的Container（），但似乎无济于事。以下是可能会帮助您并进行编码的屏幕截图。

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

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

注意：模拟器上Image1的底部是：227，模拟器上image2的底部是：277。

Answer 1

您可以使用屏幕实用程序包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
)

在文档中了解更多信息并尝试它真棒

Answer 2

我不确定这是否是您想要的，但是您可以尝试使用堆栈中的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: () {},
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

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

2 个答案: