flutter - 如何向下扩展定位的容器？

Question

我正在尝试复制设计，但是这样做很难。
在此页面上，我试图将蓝色容器堆叠在图像上并向下扩展，但不能将其向下扩展。我使用的是怪异的颜色，因此可以看到对比度。我不想使用列，因为它没有“堆叠”效果。我觉得这是一种更优雅的方式。

这是当前的样子

class IndividualNewsPage extends StatelessWidget {
  final String articleURL;
  IndividualNewsPage({this.articleURL});

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.red,
        body: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(30),
              child: Row(
                children: <Widget>[
                  Material(
                      color: Colors.transparent,
                      child: InkWell(
                          onTap: () => Navigator.pop(context),
                          child: Icon(
                            Icons.arrow_back_ios,
                            color: Colors.grey,
                          ))),
                  Spacer(),
                  Text(
                    DateFormat.yMMMMd("en_US").format(DateTime.now()),
                    style: TextStyle(
                        color: Colors.black54,
                        fontWeight: FontWeight.w600,
                        fontSize: 15),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Stack(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20),
                            topRight: Radius.circular(20)),
                        child: Container(
                          height: 400,
                          decoration: BoxDecoration(
                              color: Colors.blue,
                              image: DecorationImage(
                                  image: NetworkImage(articleURL),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                    ),
                  ],
                ),
                Positioned(
                  bottom: 30.0,
                  left: 0,
                  right: 0,
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(20),
                            topLeft: Radius.circular(20))),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            "New York",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                              "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

将Stack包装在Expanded小部件内。它将填充可用的高度，蓝色小部件将位于Column的底部。

...,
Expanded(
    child: Stack(...)
),
...

您可以在main方法中将debugPaintSizeEnabled设置为true，以查看Widget的边框，边距，位置...在构建UI时，它有助于解决Widget的位置和大小问题。

import 'package:flutter/rendering.dart'

void main() {
    debugPaintSizeEnabled = true;
    runApp();
}