列中的定位小部件导致卡片溢出答案

【问题标题】：Positioned Widget in Column Causes Card to Overflow列中的定位小部件导致卡片溢出
【发布时间】：2019-03-14 05:04:33
【问题描述】：

我目前正在学习 Flutter，遇到了一个问题，即卡片不在 Column 的边界内，但不会导致溢出。我的目标是让卡片位于底部，文本位于卡片上方。

这是我的代码：



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Container(
                    height: MediaQuery.of(context).size.height,
                    child:
                        Image.asset("assets/testimage.jpg", fit: BoxFit.cover)),
                Positioned(
                  bottom: 10.0,
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0)),
                    child: Text(
                      "A description would be going here, this is just placeholder text.",
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

以及问题和期望结果的图像示例

Problem

Desired Outcome

【问题讨论】：

尝试将您的文本包装在扩展的小部件中
用 FractionallySizedBox docs.flutter.io/flutter/widgets/FractionallySizedBox-class.html包装你的卡片

标签： dart flutter flutter-layout

【解决方案1】：

您需要在Positioned 中定义 - right: 1.0, left: 1.0, 以及底部。小部件。

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                  height: MediaQuery.of(context).size.height,
                  child: Image.network("https://placeimg.com/640/480/any",
                      fit: BoxFit.cover)),
              Positioned(
                bottom: 1.0,
                right: 1.0,
                left: 1.0,
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "A description would be going here, this is just placeholder text.",
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

输出：

【讨论】：