将元素大小调整为屏幕宽度/高度的百分比

是否有一种简单的（非 LayoutBuilder）方法来调整元素相对于屏幕尺寸（宽度/高度）的大小？例如：如何将 CardView 的宽度设置为屏幕宽度的 65%。

不能在里面完成build方法（显然），因此必须推迟到构建后。是否有一个首选的地方来放置这样的逻辑？

这是一个补充答案，显示了提到的几个解决方案的实现。

分数大小的盒子

如果您有一个小部件，您可以使用FractionallySizedBox小部件来指定要填充的可用空间的百分比。这里绿色Container设置为填充可用宽度的 70% 和可用高度的 30%。

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

Expanded

The Expanded小部件允许小部件填充可用空间，如果它在行中，则水平填充，如果在列中，则垂直填充。您可以使用flex具有多个小部件的属性来赋予它们权重。这里绿色Container占宽度的 70%，黄色Container占宽度的30%。

如果你想垂直做，那么只需更换Row with Column.

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

补充代码

这里是main.dart代码供您参考。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}