是否有一种简单的(非LayoutBuilder)方法来调整元素相对于屏幕大小(宽度/高度)的大小?例如:如何将CardView的宽度设置为屏幕宽度的65%。
它不能在build
方法内完成(显然),所以它必须推迟到post build。有没有像这样放置逻辑的首选位置?
答案 0 :(得分:91)
这可能会更清楚一点:
double width = MediaQuery.of(context).size.width;
double yourWidth = width * 0.65;
希望这能解决你的问题。
答案 1 :(得分:58)
这是一个补充性答案,显示了上述两个解决方案的实施。
如果只有一个窗口小部件,则可以使用FractionallySizedBox
窗口小部件指定要填充的可用空间的百分比。这里的绿色Container
设置为填充可用宽度的70%和可用高度的30%。
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 ...
}
答案 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,
)
输出:
2-使用FractionallySizedBox
创建一个小部件,将其子元素的大小缩小到总可用空间的一小部分。
示例:
FractionallySizedBox(
widthFactor: 0.65, // between 0 and 1
heightFactor: 1.0,
child:Container(color: Colors.red
,),
)
输出:
3-使用其他小部件,例如Expanded,Flexible和AspectRatio等。
答案 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],
)
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],
),
)
],
),
)