如何将小部件放置在具有列小部件颤振的小部件堆栈中

Question

我有一个像这样的结构的视图

- Stacks
    - Content
  - Widgets 1
  - Widgets 2

在我的例子中， Widget 2是下面的一组按钮。 我希望它们始终位于底部，如下所示：

我已经设法用这样的代码来做到这一点。

class RedeemDetailUser extends StatefulWidget {

  const RedeemDetailUser({
    super.key,
  });

  @override
  State<RedeemDetailUser> createState() => _RedeemDetailUserState();
}

class _RedeemDetailUserState extends State<RedeemDetailUser> {

  @override
  Widget build(BuildContext context) {
    Widget body() {
      return Stack(
        children: [
          Container(color: Colors.white),

          /// IMAGE AND CONTENT

          /// BACK BUTTON

          /// BUTTOM BUTTON
          Align(
            alignment: AlignmentDirectional.bottomCenter,
            child: Container(
              padding: EdgeInsets.all(defaultMargin),
              decoration: BoxDecoration(
                color: whiteColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18),
                  topRight: Radius.circular(18),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 16,
                    offset: Offset(0, 1),
                  ),
                ],
              ),
              child: CustomButton(
                title: 'Redeem Now',
                onPressed: () async {
                  print('REDEEM');
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => RedeemNow(rcm: widget.rm)),
                  );
                },
              ),
            ),
          ),

        ],
      );
    }


    return SafeArea(
      child: Scaffold(
        body: body(),
      ),
    );
  }
}

但是当我想在其中添加另一个小部件时：

Align(
  alignment: AlignmentDirectional.bottomCenter,
  child: Container(
    padding: EdgeInsets.all(defaultMargin),
    decoration: BoxDecoration(
      color: whiteColor,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(18),
        topRight: Radius.circular(18),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.grey,
          blurRadius: 16,
          offset: Offset(0, 1),
        ),
      ],
    ),
    child: Column(
      children: [
        /// WANTS TO ADD ADDITIONAL WIDGET HERE BUT THE SIZE EXPANDING
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  quantity = max(1, quantity - 1);
                });
              },
              child: Container(
                width: 26,
                height: 26,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(width: 1),
                    image: DecorationImage(
                        image: AssetImage('assets/btn_min.png'))),
              ),
            ),
            SizedBox(
              width: 50,
              child: Text(
                quantity.toString(),
                textAlign: TextAlign.center,
                style: blackTextStyle,
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  quantity = max(1, quantity - 1);
                });
              },
              child: Container(
                width: 26,
                height: 26,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(width: 1),
                    image: DecorationImage(
                        image: AssetImage('assets/btn_add.png'))),
              ),
            ),
          ],
        ),
        CustomButton(
          title: 'Redeem Now',
          onPressed: () async {
            print('REDEEM');
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => RedeemNow(rcm: widget.rm)),
            );
          },
        ),
      ],
    ),
  ),
),

然后它看起来像这样：

怎么会这样？ 我错过了什么？

听起来很琐碎，但我真的不明白。 也尝试了 Positioned 但得到了一个错误约束框

请帮助，谢谢

Answer 1

您需要为此column设置mainAxisSize ：

Column(
      mainAxisSize: MainAxisSize.min, // <---- add this
      children: [
        /// WANTS TO ADD ADDITIONAL WIDGET HERE BUT THE SIZE EXPANDING
        Row(
      .... 
),