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

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


当前回答

MediaQuery.of(context).size.width

其他回答

首先确定屏幕的大小。

Size size = MediaQuery.of(context).size;

在此之后,你可以得到宽度,并将其与0.5相乘,以获得屏幕宽度的50%。

double width50 = size.width * 0.5;

但问题通常来自高度,默认情况下,当我们使用

double screenHeight = size.height;

我们得到的高度是全局高度,包括StatusBar + notch + AppBar高度。因此,为了获得设备的左侧高度,我们需要从总高度中减去填充高度(StatusBar + notch)和AppBar高度。我们是这样做的。

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

现在我们可以使用跟随来获得屏幕高度的50%。

double height50 = leftHeight * 0.5

有很多方法可以做到这一点。

1. 使用MediaQuery:返回设备全屏,包括应用程序栏,工具栏

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )




2. 使用扩展:您可以按比例设置宽度/高度

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

3.其他人喜欢灵活和AspectRatio和分数大小的盒子

代码:

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

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

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

MediaQuery.of(context).size.width