颤振：主轴对齐不适用于堆栈

Question

我无法将列空间放置在堆栈中，我尝试将其放入一个 sizedbox 并展开甚至是一个容器，但它仍然不起作用。

这是我的代码。

Stack(
            children: [
              Image.asset(
                "assets/icons/Group 5661.png",
                width: double.infinity,
                fit: BoxFit.contain,
              ),
              Positioned(
                left: 8.0,
                top: 30.0,
                child: Column(
                  // bottom: 20, right: 20, left: 20
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Your available balance',
                        style: TextStyle(
                            fontFamily: textfont,
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.w600)),
                    Text('0.00',
                        style: TextStyle(
                            fontFamily: textfont,
                            color: Colors.white,
                            fontSize: 30,
                            fontWeight: FontWeight.w600)),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(right: 26),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width / 3,
                            height: getProportionateScreenHeight(66),
                            child: TextButton(
                              style: TextButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(6),
                                side: BorderSide(
                                  color: Colors.white,
                                ),
                              )),
                              onPressed: () {},
                              child: Text(
                                'Accounts',
                                style: TextStyle(
                                  fontSize: getProportionateScreenWidth(18),
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 26),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width / 3,
                            height: getProportionateScreenHeight(66),
                            child: TextButton(
                              style: TextButton.styleFrom(
                                  primary: Colors.orange,
                                  backgroundColor: Colors.orange,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(6),
                                  )),
                              onPressed: () {},
                              child: Text(
                                'Fund Wallet',
                                style: TextStyle(
                                  fontSize: getProportionateScreenWidth(18),
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),

我发现如果我删除堆栈小部件它可以工作但在定位小部件内那么 MainAxisAlignment 对 mainaxisalignment.start 不起作用。

有人可以让我知道这是什么奇怪的行为以及对此的解决方案吗？

问候。

Answer 1

您的 Column 占用的空间刚好足以显示其子项。为了让它全宽，您还应该为您的 Positioned 小部件指定一个正确的锚点。

这是之前的情况：

之后：

Positioned(
  left: 8.0,
  right: 8.0,
  top: 30.0,
  child: ...
),

最后评论后更新：

child: Stack(
  children: [
    Positioned.fill(
      child: Container(
        padding: EdgeInsets.all(20.0),
        color: Colors.amber.shade300,
        child: Column(...),
      ),
    ),
  ],
),

易于复制粘贴的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.blueGrey,
      child: Stack(
        children: [
          Positioned(
            left: 8.0,
            right: 8.0,
            top: 30.0,
            child: ColoredBox(
              color: Colors.amber.shade300,
              child: Column(
                // bottom: 20, right: 20, left: 20
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Your available balance',
                      style: TextStyle(
                          // fontFamily: textfont,
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.w600)),
                  Text('0.00',
                      style: TextStyle(
                          // fontFamily: textfont,
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.w600)),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 26),
                        child: SizedBox(
                          width: MediaQuery.of(context).size.width / 3,
                          height: 66, //getProportionateScreenHeight(66),
                          child: TextButton(
                            style: TextButton.styleFrom(
                                shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(6),
                              side: BorderSide(
                                color: Colors.white,
                              ),
                            )),
                            onPressed: () {},
                            child: Text(
                              'Accounts',
                              style: TextStyle(
                                fontSize: 18, //getProportionateScreenWidth(18),
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 26),
                        child: SizedBox(
                          width: MediaQuery.of(context).size.width / 3,
                          height: 66, //getProportionateScreenHeight(66),
                          child: TextButton(
                            style: TextButton.styleFrom(
                                primary: Colors.orange,
                                backgroundColor: Colors.orange,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(6),
                                )),
                            onPressed: () {},
                            child: Text(
                              'Fund Wallet',
                              style: TextStyle(
                                fontSize: 18, //getProportionateScreenWidth(18),
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}