Question

我有一个Row，里面有2个Expanded小部件。我希望Expanded小部件不仅可以水平扩展，而且还可以垂直扩展。

我知道我可以用其他百分比来衡量其他容器的大小，但是我强烈感觉有更简单的方法。我也尝试了crossAxisAlignment: CrossAxisAlignment.stretch的小尺寸框无济于事。为什么我不能垂直扩展容器？

@override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * .5,
      width: double.infinity,
      color: Colors.blue,
      child: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * .33,
            width: double.infinity,
            child: Image.asset(
              'assets/images/temp.png',
              fit: BoxFit.cover,
            ),
          ),
          Row(
            // crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.red,
                ),
              ),

              Expanded(
                flex: 1,
                child: Center(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Text('hi'),
                    color: Colors.green,
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

输出：

@override
Widget build(BuildContext context) {
  return Container(
    height: MediaQuery.of(context).size.height * .5,
    width: double.infinity,
    color: Colors.blue,
    child: Column(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height * .33,
          width: double.infinity,
          child: Image.asset(
            chocolateImage,
            fit: BoxFit.cover,
          ),
        ),
        Expanded( // this is what you need
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.red,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.green,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  );
}

强制展开的行项目采用最大可用高度

1 个答案: