flutter - 如何在 ListView 的嵌套列中填充垂直空间

Question

我希望绿色框填充垂直空间，这样 MainAxisAlignment.spaceBetween 就可以了。

import 'package:flutter/material.dart';

void main() => runApp(_app);

const title = "Layout test";

var _app = new MaterialApp(
  title: title,
  home: new Scaffold(
    appBar: new AppBar(
      title: const Text(title),
    ),
    body: new _LayoutTest(),
  ),
);

class _LayoutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return new ListView(
      children: [
        new Container(
          color: Colors.orangeAccent,
          margin: const EdgeInsets.only(bottom: 20.0),
          child: new Row(
            children: [
              new Image.network(
                // this can be any image
                "http://via.placeholder.com/185x278",
                width: size.width / 5,
              ),
              new Expanded(
                child: new Container(
                  margin: const EdgeInsets.all(8.0),
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.lightGreenAccent,
                  // this should fill vertical space
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      const Text("Top"),
                      const Text("Bottom"),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

您可以为内部容器设置与外部容器相同的高度:

class _LayoutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final newRandom = new Random().nextInt(50);

    return new ListView(
      children: [
        new Container(
          color: Colors.orangeAccent,
          margin: const EdgeInsets.only(bottom: 20.0),
          child: new Row(
            children: [
              new Container(
                color: Colors.pinkAccent,
                width: size.width / 5,
                height: 200.0 + newRandom,
              ),
              new Expanded(
                child: new Container(
                  margin: const EdgeInsets.all(8.0),
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.lightGreenAccent,
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      const Text("Top"),
                      const Text("Bottom"),
                    ],
                  ),
                  height: 200.0 + newRandom,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}