Flutter赞珠计数器按钮位置适配问题：屏幕尺寸变化时按钮偏移

你的问题出在按钮位置绑定了屏幕高度的百分比，而计数器图片是按屏幕比例缩放的，两者相对位置没有关联，导致不同屏幕尺寸下按钮偏移。要让按钮固定在计数器图片的特定位置，需要把按钮位置和计数器图片绑定，而非屏幕。

方案一：基于计数器图片尺寸计算位置 #

通过LayoutBuilder获取计数器图片的实际尺寸，用图片高度的百分比设置按钮的偏移，确保相对位置固定：

import 'package:flutter/material.dart';

class TasbeehMainScreen extends StatefulWidget {
  const TasbeehMainScreen({super.key});

  @override
  State<TasbeehMainScreen> createState() => _TasbeehMainScreenState();
}

class _TasbeehMainScreenState extends State<TasbeehMainScreen> {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.sizeOf(context);

    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LayoutBuilder(
              builder: (context, constraints) {
                // 定义计数器图片的尺寸
                final counterImageHeight = screenSize.height * 0.8;
                final counterImageWidth = screenSize.width * 0.8;
                // 按钮相对于图片底部的偏移比例（可根据需求调整）
                final buttonBottomOffset = counterImageHeight * 0.15;

                return Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.asset(
                      'assets/images/counter.png',
                      height: counterImageHeight,
                      width: counterImageWidth,
                    ),
                    Positioned(
                      bottom: buttonBottomOffset,
                      child: GestureDetector(
                        onTap: () {
                          // 这里添加点击计数逻辑
                        },
                        child: Image.asset(
                          'assets/images/button.png',
                          height: counterImageHeight * 0.2,
                          width: counterImageWidth * 0.2,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

方案二：用Align组件快速定位 #

Align的alignment参数支持相对比例偏移，直接基于Stack（即计数器图片）的中心定位，代码更简洁：

import 'package:flutter/material.dart';

class TasbeehMainScreen extends StatefulWidget {
  const TasbeehMainScreen({super.key});

  @override
  State<TasbeehMainScreen> createState() => _TasbeehMainScreenState();
}

class _TasbeehMainScreenState extends State<TasbeehMainScreen> {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.sizeOf(context);

    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Image.asset(
                  'assets/images/counter.png',
                  height: screenSize.height * 0.8,
                  width: screenSize.width * 0.8,
                ),
                // 调整alignment的y值控制上下位置：-1=顶部，0=中心，1=底部
                Align(
                  alignment: const Alignment(0, 0.6),
                  child: GestureDetector(
                    onTap: () {
                      // 这里添加点击计数逻辑
                    },
                    child: Image.asset(
                      'assets/images/button.png',
                      height: screenSize.height * 0.2,
                      width: screenSize.width * 0.2,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

两种方法都能保证按钮在任何屏幕尺寸下，都固定在计数器图片的指定位置，不会偏移。

内容的提问来源于stack exchange，提问作者Muzammil sajid