根据屏幕百分比调整元素大小 width/height

Question

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

无法在 build 方法中完成（显然），因此必须推迟到 post 构建。有没有一个首选的地方来放置这样的逻辑？

Answer 1

您可以使用 Flexible 或 Expanded 子项构建一个 Column/Row，其弹性值加起来达到您想要的百分比。

您可能还会发现 AspectRatio 小部件很有用。

Answer 2

FractionallySizedBox 也可能有用。您还可以直接从 MediaQuery.of(context).size 中读取屏幕宽度，并根据

创建一个尺寸框

MediaQuery.of(context).size.width * 0.65

如果无论布局如何，您确实希望将大小调整为屏幕的一小部分。

Answer 3

这可能更清楚一点：

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

希望这能解决您的问题。

Answer 4

如果您使用的是 GridView，则可以使用类似于 Ian Hickson 的解决方案。

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

Answer 5

MediaQuery.of(context).size.width

Answer 6

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

Answer 7

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

FractionallySizedBox

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

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

展开

Expanded 小部件允许小部件填充可用的 space，如果它在行中则水平填充，如果它在列中则垂直填充。您可以将 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 ...
}

Answer 8

首先获取屏幕尺寸。

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

之后你可以得到 width 并将它乘以 0.5 得到屏幕宽度的 50%。

double width50 = size.width * 0.5;

但是问题通常出现在height，默认情况下我们使用

double screenHeight = size.height;

我们得到的高度是全局高度，包括StatusBar+notch+AppBar高度。因此，为了获得设备的左侧高度，我们需要从总高度中减去 padding 高度（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

Answer 9

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

1.使用 MediaQuery : 它 return 您设备的全屏，包括应用栏、工具栏

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

2。使用 Expanded : 你可以设置 width/height 比例

 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.其他喜欢Flexible and AspectRatio and FractionallySizedBox

Answer 10

使用 LayoutBuilder 小部件，它会为您提供约束，您可以使用这些约束来获取不包括 AppBar 和填充的高度。然后使用 SizedBox 并使用 LayoutBuilder

中的约束提供宽度和高度

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...

Answer 11

代码：

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

Answer 12

有几种可能：

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`

的使用

创建一个小部件，将其子项的大小调整为可用总数的一小部分 space。

示例：

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

输出：

3- 使用其他小部件，例如 `Expanded`、`Flexible` 和 `AspectRatio` 等。

Answer 13

您可以使用对齐小部件。 heightFactor 和 widthFactor 参数乘以子部件的大小。这是一个示例，它将制作一个固定高度的小部件

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

根据屏幕百分比调整元素大小 width/height

Sizing elements to percentage of screen width/height

screen-size

dart

flutter

flutter-layout

FractionallySizedBox

展开

补充代码

1- 第一个是使用 `MediaQuery` :

2-`FractionallySizedBox`

3- 使用其他小部件，例如 `Expanded`、`Flexible` 和 `AspectRatio` 等。

根据屏幕百分比调整元素大小 width/height

Sizing elements to percentage of screen width/height

screen-size

dart

flutter

flutter-layout

FractionallySizedBox

展开

补充代码

1- 第一个是使用 MediaQuery :

2-FractionallySizedBox

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

1- 第一个是使用 `MediaQuery` :

2-`FractionallySizedBox`

3- 使用其他小部件，例如 `Expanded`、`Flexible` 和 `AspectRatio` 等。