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

Question

是否有一种简单的(非 LayoutBuilder)方法可以根据屏幕尺寸(宽度/高度)调整元素的大小？例如:如何将 CardView 的宽度设置为屏幕宽度的 65%。

它不能在 build 方法中完成(显然)，所以它必须推迟到构建后。有没有首选的地方放这样的逻辑？

Answer 1

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

FractionallySizedBox

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

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

展开

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

如果你想垂直做，那么只需将 Row 替换为 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 ...
}