Android 上堆栈项目的颤动奇怪行为

Question

我有一个简单的堆栈，我想在右下角显示相机。在我的 iPhone 上，一切正常并显示在右下角。在我的 Android 模拟器上，它总是位于左上角。首先，我想知道为什么我们在这里有这样的差异，第二：我怎样才能让它在 Android 的右下角工作？我已经尝试过对齐、固定框和定位，这实际上对于 Android 来说被忽略了。这是代码：

...
if (state is ConferenceLoaded) {
              return Stack(
                children: <Widget>[
                  _buildParticipants(context),
                  Positioned(
                      bottom: 60,
                      child: IconButton(
                        color: Colors.red,
                        icon: Icon(
                          Icons.call_end_sharp,
                          color: Colors.white,
                        ),
                        onPressed: () async {
                          context.read<ConferenceCubit>().disconnect();
                          Navigator.of(context).pop();
                        },
                      ))
                ],
              );
            }

Widget _buildParticipants(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final children = <Widget>[];
    _buildOverlayLayout(context, size, children);
    return Stack(children: children);
  }

  void _buildOverlayLayout(
      BuildContext context, Size size, List<Widget> children) {
    final conferenceRoom = context.read<ConferenceCubit>();
    final participants = conferenceRoom.participants;

    children.add(
          Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width * 1,
          height: MediaQuery.of(context).size.height *1,
          color: Colors.blue,
          child: participants.length > 1 ? participants.firstWhere((element) => element.local == false) : Text('Waiting for partner'),
        ),
         Container(
            alignment: Alignment.bottomRight,
            
            width: MediaQuery.of(context).size.width * 1,
          height: MediaQuery.of(context).size.height *1,
            
              padding: const EdgeInsets.all(8.0),
              child: Container(
              alignment: Alignment.bottomRight,
                width: 100,
                height: 150,
                child: participants.firstWhere((element) => element.local == true)),
            ),
      ],
    ),);

ios 上的结果：

Android 上的结果：

编辑：

如果我只是改变我的

child: participants.firstWhere((element) => element.local == true)),

到一个红色容器，我也将它放在右下角。但我在我的

ParticipantWidget

中没有看到布局问题，实际上看起来像这样：

class ParticipantWidget extends StatelessWidget {
  final Widget child;
  final String? id;
  final bool? local;

  const ParticipantWidget({
    required this.child,
    required this.id,
    required this.local
  });

  @override
  Widget build(BuildContext context) {
    return child;
  }
}

Answer 1

好吧，我偶然发现了它不起作用的原因，我想与您分享，因为人们可以节省很多时间在这里阅读我的问题案例。

对于上面的示例，我使用了一个名为

twilio_video

的 pubdev 库。在幕后，该库正在使用 android web 和平台视图，这导致了这里的问题。有更多的库受到影响，导致完全相同的行为。例如 flutter

mapbox_gl

以及所有使用 android 平台视图的人。

在这里您可以阅读有关该问题的更多信息并继续关注，直到找到解决方案。

https://github.com/flutter/flutter/issues/103630

作为快速而肮脏的解决方案，您只需将 flutter 版本恢复到 2.10.5，一切就可以在 Android 上正常工作。

Answer 2

我最近也遇到了类似的问题。该问题是 Flutter Android 特有的，已在 Flutter 版本 3.10+ 中修复。

您所需要做的就是升级 Flutter 版本并解决所有依赖关系。

查看当前的 Flutter 版本：

flutter --version

升级您的 Flutter 版本：

flutter upgrade

如果您有意或无意修改了Flutter源码

flutter upgrade --force