如何在颤动中获取堆栈内容器的固有大小

Posted 2023-02-23

【中文标题】如何在颤动中获取堆栈内容器的固有大小

【英文标题】：How to get the intrinsic size of container inside stack in flutter

【发布时间】：2022-01-23 23:30:29

【问题描述】：

我正在尝试构建一个 UI。我是 Flutter 的新手，我对如何在堆栈中获取容器的大小感到困惑。现在它填充到堆栈大小。我想知道 container 的固有大小，所以我可以用图像视图填充底部的一半。

我的要求是

我现在得到的结果是

我使用的代码是一个包含两个子小部件的堆栈。问题是第一个小部件应该具有基于屏幕大小的动态大小，而第二个小部件，即底部图像将填充剩余空间。现在，这仅适用于静态高度。不指定高度将使第一个孩子填满堆栈。另外，这是构建此类小部件的正确方法吗？

我的代码：我无法分享完整的代码，因为使用了一些自定义小部件，因此会发布很多不必要的代码库。但是，我的结构如下

 @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            Positioned(
              left: 0,
              bottom: 0,
              right: 0,
              child: Container(
                height: 450, // This need to be made to fill the remaining space.
                decoration: const BoxDecoration(
                  color: Colors.amber,
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage(constants.bottomBanner),
                  ),
                ),
              ),
            ),
            Container(
              height: 552, // This will need to be dynamic *********
              decoration: BoxDecoration(
                color: const Color(0xFFFEFBF3),
                image: const DecorationImage(
                  image: AssetImage(constants.topBackground),
                ),
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(18),
                  bottomRight: Radius.circular(18),
                ),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 10,
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: SafeArea(
                child: Column(
                  children: [
                    const LogoHeaderWidget(
                      title: constants.login,
                      subTitle: constants.loginSubtitle,
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 32),
                      child: Column(
                        children: [
                          const SizedBox(
                            height: 12,
                          ),
                          const MSGRTextfield(
                            labelText: "Mobile Number",
                            keyboardType: TextInputType.number,
                          ),
                          const MSGRTextfield(
                            labelText: "Card Number",
                            keyboardType: TextInputType.number,
                          ),
                          const SizedBox(
                            height: 6,
                          ),
                          SizedBox(
                            height: 42,
                            width: double.infinity,
                            child: ElevatedButton(
                                onPressed: _onLoginPressed,
                                child: const Text("Login"),
                                style: ButtonStyle(
                                  elevation: MaterialStateProperty.all(3),
                                  shadowColor: MaterialStateProperty.all(
                                      const Color(0xFFEED196)),
                                )),
                          ),
                          const SizedBox(
                            height: 30,
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  

【参考方案1】：

如果你想得到Stack里面的高度，你可以像这样使用LayoutBuilder：

Stack(
  children: [
    Positioned(
      child: LayoutBuilder(
        builder: (_, constraints) 
          final height = constraints.maxHeight; // This is the height.
          return Container();
        ,
      ),
    ),
    Container(
      height: 100,
      color: Colors.red,
    ),
  ],
)

---

但在您的代码中，最好将 Positioned 小部件替换为 Positioned.fill。

SizedBox(
  width: double.infinity,
  height: double.infinity,
  child: Stack(
    children: [
      Positioned.fill(
        child: Container(
          ...
        ),
      ),
      Container(
        height: 552, // This will need to be dynamic *********
        ...
      ),
    ],
  ),
)