Flutter按钮底部右侧对齐问题求助

你直接给OutlinedButton加alignment属性是没用的，这个属性属于布局容器（比如Align、Container），而非按钮组件本身。下面提供几种可行的实现方式：

方式一：修改GoBack组件内部布局 #

给按钮套一层Align容器，设置对齐方式为底部右侧，这样组件本身就具备定位能力：

import 'package:flutter/material.dart';
class GoBack extends StatelessWidget {
  const GoBack({required this.onGoBack, super.key});

  final void Function() onGoBack;

  @override
  Widget build(context) {
    return Align(
      alignment: Alignment.bottomRight,
      child: OutlinedButton(
        onPressed: onGoBack,
        style: OutlinedButton.styleFrom(
          backgroundColor: const Color.fromARGB(208, 93, 0, 255),
          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
          minimumSize: const Size(60, 60),
        ),
        child: const Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.arrow_circle_left_rounded),
          ]),
      ),
    );
  }
}

使用时要确保父容器占满屏幕，比如放在Scaffold的body里并配合SizedBox.expand：

Scaffold(
  body: SizedBox.expand(
    child: GoBack(onGoBack: () { Navigator.pop(context); }),
  ),
)

方式二：在使用组件时包裹定位容器 #

如果不想修改GoBack组件，直接在使用它的时候用Align或Stack+Positioned包裹：

用Align包裹 #

Scaffold(
  body: Align(
    alignment: Alignment.bottomRight,
    child: GoBack(onGoBack: () { Navigator.pop(context); }),
  ),
)

用Stack+Positioned（可灵活调整边距） #

如果需要给按钮和屏幕边缘留间距，这种方式更合适：

Scaffold(
  body: Stack(
    children: [
      // 这里放页面的其他内容
      Positioned(
        bottom: 16, // 距离底部16px
        right: 16,  // 距离右侧16px
        child: GoBack(onGoBack: () { Navigator.pop(context); }),
      ),
    ],
  ),
)

方式三：利用Scaffold的悬浮按钮 #

如果按钮需要悬浮效果，可以直接用Scaffold的floatingActionButton：

Scaffold(
  floatingActionButton: GoBack(onGoBack: () { Navigator.pop(context); }),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, // 定位到底部右侧
  body: // 页面其他内容
)

内容的提问来源于stack exchange，提问作者Mohamad Bdeir