264

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

它不能在build方法内部完成（显然），所以它必须推迟到构建后。有没有一个首选的地方可以放置这样的逻辑？

4

13 回答 13

332

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

FractionallySizedBox

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

FractionallySizedBox 
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 ...
}
于 2018-12-07T05:08:23.380 回答
305

FractionallySizedBox也可能有用。您还可以直接从中读取屏幕宽度MediaQuery.of(context).size并根据它创建一个大小的框

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

如果您真的想将尺寸缩小为屏幕的一部分，而不管布局是什么。

于 2017-03-31T00:45:59.063 回答
141

这可能更清楚一点：

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

double yourWidth = width * 0.65;

希望这解决了你的问题。

于 2018-03-14T17:05:08.953 回答
21

您可以构建具有灵活或扩展子项的列/行，这些子项的 flex 值加起来等于您想要的百分比。

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

于 2017-03-30T22:58:23.367 回答
21

有几种可能性：

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。

于 2020-12-10T14:29:10.287 回答
19

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

1.使用MediaQuery： 它返回您设备的全屏，包括appbar，toolbar

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

在此处输入图像描述


2. 使用 Expanded ：您可以按比例设置宽度/高度

 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、 AspectRatio和FractionallySizedBox

于 2019-12-03T07:31:15.220 回答
13

首先获取屏幕的大小。

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
于 2019-07-07T15:27:42.733 回答
9 
MediaQuery.of(context).size.width
于 2018-06-02T21:07:31.993 回答
7

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

于 2018-11-28T03:58:59.423 回答
7

使用 LayoutBuilder Widget，它将为您提供约束，您可以使用这些约束来获取排除 AppBar 和填充的高度。然后使用 SizedBox 并使用 LayoutBuilder 中的约束提供宽度和高度

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...
于 2020-01-08T16:12:29.003 回答
2

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

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4
于 2018-03-28T16:00:27.683 回答
2

代码 ：

MediaQuery.of(context).size.width //to get the width of screen
MediaQuery.of(context).size.height //to get height of screen
于 2020-11-30T17:58:36.930 回答
1

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

         Align(
            alignment: Alignment.topCenter,
            heightFactor: 0.63,
            widthFactor: ,
            child: Container(
              width: double.infinity,
            ),
于 2021-09-06T15:00:04.870 回答