有没有办法保持一行中多个小部件的长宽比（颤振）？

Question

我正在使用“行”将两个Widget（视频控制器）水平对齐。使用Expanded及其flex属性，我可以分割可用空间。 问题在于视频的高度始终会占据整个垂直空间，因此视频会变得拉长。

我想要实现的目标：

我尝试过的事情：

Row(
    children: <Widget>[
        Expanded(
            child: AspectRatio (
                child: VideoPlayer(_leftPlayerController),
                aspectRatio: _leftPlayerController.value.aspectRatio,
            ),
            flex: 7, // 70%
        ),
        Expanded(
            child: Align (
                child: AspectRatio (
                    child: VideoPlayer(_rightPlayerController),
                    aspectRatio: _rightPlayerController.value.aspectRatio,
                ),
            ),
            flex: 3, // 30%
        ),
    ],
);

Answer 1

尝试一下并提供反馈

          LayoutBuilder(
              builder: (context, BoxConstraints constraints) {
                return Container(
                  width: constraints.maxWidth,
                  child: Row(
                    children: <Widget>[
                      Container(
                        width: constraints.maxWidth*0.7,//70%
                        height: (constraints.maxWidth*0.7)/ratio,
                        child: //your videoplayer,
                      ),
                      Container(
                        width: constraints.maxWidth*0.3,
                        height: (constraints.maxWidth*0.3)/ratio,//30%
                        child: //another video player,
                      ),
                    ],
                  ),
                );
              }

Answer 2

是的，您可以借助 Expanded 小部件来完成。见示例：

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    MyItem(Colors.orange),
    MyItem(Colors.blue),
    MyItem(Colors.orange),
    MyItem(Colors.blue),
    MyItem(Colors.orange),
  ],
)

我的物品在哪里：

class MyItem extends StatelessWidget {
  final Color color;

  MyItem(this.color);

  @override
  Widget build(BuildContext context) => Expanded(
          child: AspectRatio(
        aspectRatio: 1,
        child: Container(
          color: color,
        ),
      ));
}

结果：