[译] Flutter —— 根据不同屏幕尺寸高效的适配 UI

最新推荐文章于 2024-04-20 17:24:01 发布

2401_84121573

最新推荐文章于 2024-04-20 17:24:01 发布

阅读量1.3k

点赞数 23

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： flutter ui

本文链接：https://blog.csdn.net/2401_84121573/article/details/137640387

本文介绍了如何在Flutter中使用SizeConfig类进行屏幕尺寸和UI元素大小的动态计算，包括处理刘海屏和安全区域（SafeArea）。作者分享了如何初始化SizeConfig并在HomeScreen中应用，以及如何适配文字。附有GitHub代码链接和系统化学习资源推荐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;
}

我们需要写一个构造函数去初始化这些属性：

class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;

void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}

然后就是要在你的 home screen 里初始化 SizeConfig。

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
…
}
}

然后我们就可以使用 SizeConfig 里的属性去定义你的 Container 的宽高。

Widget build(BuildContext context) {
return Center(
child: Container(
height: SizeConfig.blockSizeVertical * 20,
width: SizeConfig.blockSizeHorizontal * 50,
color: Colors.orange,
),
);
}

最后，在不同的屏幕上，矩形的宽都是屏幕宽的 50%，矩形的高都是屏幕高的 20%。

下面就是矩形显示在 iPhone 5s 和 iPhone XS Max 的样子。