是否有一种简单的(非layoutbuilder)方法来相对于屏幕大小(宽/高)来调整元素的大小?例如:我如何设置CardView的宽度为屏幕宽度的65%。

它不能在构建方法内部完成(显然),所以它必须推迟到构建后。是否有一个更好的地方来放置这样的逻辑?


当前回答

使用缩放器定义布局宽度和高度的百分比

dependencies:
      scaler: ^1.1.0+1

在pubspec中设置后。Yaml您可以通过以下代码使用此功能-

import 'package:scaler/scaler.dart';

导入后使用this -

import 'package:scaler/scaler.dart';

@override
Widget build(BuildContext context) {

  /**
   * Container with 25% width of screen 
   * and 25% height of screen
   */
  return   Container(
      height: Scaler.height(0.25, context),
      width: Scaler.width(0.25, context),
      child: Container()
  );
}

更详细地说

https://pub.dev/packages/scaler

其他回答

如果你正在使用GridView,你可以使用Ian Hickson的解决方案。

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

您可以使用Align小部件。hightfactor和widthFactor参数乘以子部件的大小。下面是一个示例,它将创建一个具有%比例固定高度的小部件

         Align(
            alignment: Alignment.topCenter,
            heightFactor: 0.63,
            widthFactor: ,
            child: Container(
              width: double.infinity,
            ),

您可以将MediaQuery与小部件的当前上下文一起使用,并像这样获得宽度或高度 double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 然后,你可以把它乘以你想要的百分比

MediaQuery.of(context).size.width

有几种可能性:

1-第一个是使用MediaQuery:

代码:

MediaQuery.of(context).size.width //to get the width of screen
MediaQuery.of(context).size.height //to get height of screen

使用示例:

Container(
        color: Colors.yellow,
        height: MediaQuery.of(context).size.height * 0.65,
        width: MediaQuery.of(context).size.width,
      )

输出:

2-使用FractionallySizedBox

创建一个小部件,将其子部件的大小设置为总可用空间的一小部分。

例子:

FractionallySizedBox(
           widthFactor: 0.65, // between 0 and 1 
           heightFactor: 1.0,
           child:Container(color: Colors.red
           ,),
         )

输出:

3-使用其他小部件,如Expanded, Flexible和AspectRatio等。