Flutter 适配组件

最新推荐文章于 2025-06-02 14:31:05 发布

A 曦曦

最新推荐文章于 2025-06-02 14:31:05 发布

阅读量984

点赞数

CC 4.0 BY-SA版权

文章标签： flutter android

本文链接：https://blog.youkuaiyun.com/XixiziMeng/article/details/127572666

本文介绍了Flutter中用于适配不同屏幕尺寸和方向的组件，如MediaQuery获取屏幕信息，LayoutBuilder获取Widget约束，OrientationBuilder判断方向，以及Expanded, Flexible, FractionallySizedBox和AspectRatio在布局中的应用。" 111984119,10538634,Oracle 数据库：查看表历史统计信息的方法,"['数据库', 'Oracle', '统计信息', '查询']

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

Flutter 适配组件

在 Flutter 我们只需要掌握一些 Widget 即可，实际的开发过程中，我们也只需要在合适的地方使用它们即可。

1. MediaQuery

第一个 Widget 即是 MediaQuery，通过它可以直接获得屏幕的大小（宽度 / 高度）和方向（纵向 / 横向）。

cclass HomePage extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    Size screenSize = MediaQuery.of(context).size;
    Orientation orientation = MediaQuery.of(context).orientation;
    return Scaffold(
      body: Container(
        color: CustomColors.android,
        child: Center(
          child: Text(
            'View\n\n' +
                '[MediaQuery width]: ${
     
     screenSize.width.toStringAsFixed(2)}\n\n' +
                '[MediaQuery orientation]: $orientation',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

2. LayoutBuilder

使用 LayoutBuilder 组件，可以获得一个 BoxConstraints 对象，通过该对象我们就可以拿到 Widget 的 maxWidth（最大宽度）和maxHeight（最大高度）

MediaQuery 和 LayoutBuilder 的区别在在于，MediaQuery 得到的是整个屏幕的宽高，而 LayoutBuilder 得到的是特定组件的最大高度和宽度。

class HomePage extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: 2,
            child: LayoutBuilder(
              builder: (context, constraints) => Container(
                color: CustomColors.android,
                child: Center(
                  child: Text(
                    'View 1\n\n' +
                        '[MediaQuery]:\n ${
     
     screenSize.width.toStringAsFixed(2)}\n\n' +
                        '[LayoutBuilder]:\n${
     
     constraints.maxWidth.toStringAsFixed(2)}',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: LayoutBuilder(
              builder: (context, constraints) =>