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

时间:2017-03-30 15:26:14

标签: flutter

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

它不能在build方法内完成(显然),所以它必须推迟到post build。有没有像这样放置逻辑的首选位置?

12 个答案:

答案 0 :(得分:91)

这可能会更清楚一点:

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

double yourWidth = width * 0.65;

希望这能解决你的问题。

答案 1 :(得分:58)

这是一个补充性答案,显示了上述两个解决方案的实施。

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%。

Expanded

如果您想垂直进行操作,只需将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 ...
}

答案 2 :(得分:49)

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

创建一个大小的框
MediaQuery.of(context).size.width * 0.65

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

答案 3 :(得分:8)

您可以构建一个包含Flexible或扩展子项的列/行,这些子项的弹性值可以达到您想要的百分比。

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

答案 4 :(得分:6)

MediaQuery.of(context).size.width

答案 5 :(得分:5)

使用LayoutBuilder窗口小部件,它将为您提供一些约束,您可以使用这些约束来获取不包括AppBar和填充的高度。然后使用SizedBox并使用LayoutBuilder中的约束提供宽度和高度

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

答案 6 :(得分:4)

您可以将MediaQuery与窗口小部件的当前上下文一起使用,并获得宽度或高度,如下所示 double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 之后,您可以将其乘以所需的百分比

答案 7 :(得分:2)

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

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

答案 8 :(得分:2)

代码:

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

答案 9 :(得分:1)

首先获取屏幕尺寸。

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

答案 10 :(得分:0)

有几种可能性:

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,
      )

输出:

enter image description here

My complete code

2-使用FractionallySizedBox

创建一个小部件,将其子元素的大小缩小到总可用空间的一小部分。

示例:

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

输出:

enter image description here

3-使用其他小部件,例如ExpandedFlexibleAspectRatio等。

答案 11 :(得分:-1)

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

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],
 )

enter image description here


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],
              ),
            )
          ],
        ),
    )

enter image description here



3。其他诸如FlexibleAspectRatioFractionallySizedBox