如何在Flutter中扩展孩子的整个宽度？

Question

我还有下一个标记：

红色块是具有水平方向的ListView。 紫色块只是所有内容的容器。 白色也是“容器”，但带有填充物。

我想将红色块的宽度扩大到全宽。我该怎么做？它应该看起来像这样：

标记代码：

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
          horizontal: 30.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.purple,
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Math Reports"),
              Container(
                color: Colors.red,
                padding: EdgeInsets.symmetric(vertical: 10.0),
                height: 170.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  // children: renderItems(), // the example of code without green blocks
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以按以下方式使用Stack

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.purple,
              margin: EdgeInsets.symmetric(horizontal: 30),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 30.0),
              child: Text(
                "Math Reports",
                style: TextStyle(color: Colors.white),
              ),
            ),
            Container(
              height: 170,
              color: Colors.red,
              margin: EdgeInsets.only(top: 30),
              child: ListView(
                scrollDirection: Axis.horizontal,
              ),
            )
          ],
        ),
      ),
    );
  }
}