Flutter 构建自适应布局

简介: Flutter 构建自适应布局

MediaQuery

主要原理是通过 MediaQuery 拿到上下文(就是当前设备的信息),然后动态的配置宽度和高度来达到自适应。

使用 MediaQuery:Flutter 的 MediaQuery 类提供了设备的屏幕信息,如屏幕宽度、高度和方向等。你可以使用 MediaQuery.of(context) 来获取当前上下文中的 MediaQueryData 对象,并根据需要调整布局。

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取设备的屏幕信息
    final mediaQuery = MediaQuery.of(context);
    return MaterialApp(
      title: 'Responsive Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive Layout'),
        ),
        body: Container(
          // 使用 mediaQuery 获取屏幕宽度和高度
          width: mediaQuery.size.width,
          height: mediaQuery.size.height,
          child: Column(
            children: [
             Text(
              '当前设备宽度: ${mediaQuery.size.width}',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '当前设备宽度: ${mediaQuery.size.width}',
              style: TextStyle(fontSize: 20),
            ),
            ],
          ),
        ),
      ),
    );
  }
}

使用注意:

  1. 在使用 MediaQuery 之前,确保你的组件树中有一个 MaterialApp 或 WidgetsApp,以便获取正确的上下文。
  2. MediaQuery 是一个全局的对象,可以在任何地方获取。但为了避免重复获取,通常会在 build 方法中获取一次,并将其存储在变量中供后续使用。
  3. MediaQuery 提供了许多其他属性,如设备方向、像素密度等,你可以根据实际需求使用这些属性来调整布局。

LayoutBuilder

使用 LayoutBuilder:Flutter 的 LayoutBuilder 组件可以根据父容器的约束条件来构建自适应布局。通过 builder 回调函数的参数constraints 来拿到父容易得宽度和高度来 达到自适应。

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
      // 获取父容器的宽度和高度
      var screenWidth = constraints.maxWidth;
      var screenHeight = constraints.maxHeight;
      }
)

Widget build(BuildContext context) {
    // 获取设备的屏幕信息
    final mediaQuery = MediaQuery.of(context);
    return Container(child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
      // 获取父容器的宽度和高度
      var screenWidth = constraints.maxWidth;
      var screenHeight = constraints.maxHeight;
      return Container(
          child: Column(
        children: [
          Text('constraints-当前设备的宽度: ${screenWidth}',
              style: TextStyle(color: Colors.red, fontSize: 22)),
          Text('constraints-当前设备的高度: ${screenHeight}',
              style: TextStyle(color: Colors.red, fontSize: 22)),
        ],
      ));
    })

使用注意:

  1. LayoutBuilder 必须作为父容器的直接子组件,以便能够获取到正确的约束条件。
  2. builder 回调函数中,可以根据约束条件 constraints 来动态调整子组件的布局。
  3. 父容器的约束条件 constraints 提供了许多属性,如最小宽度、最大宽度、最小高度、最大高度等,你可以根据实际需求使用这些属性来进行布局调整。
  4. 使用 Flex 和 Expanded:Flutter 的 FlexExpanded 组件可用于创建弹性布局,使子组件能够根据可用空间自动调整大小。
Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(),
    ),
    Expanded(
      flex: 2,
      child: Container(),
    ),
  ],
)
  1. 使用 Wrap 和 Flow:Flutter 的 WrapFlow 组件可用于创建流式布局,使子组件能够自动换行并适应可用空间。
Wrap(
  children: [
    Container(),
    Container(),
    Container(),
  ],
)
  1. 使用约束布局:Flutter 的 ConstrainedBoxAspectRatio 组件可用于设置子组件的最小或最大尺寸,并保持宽高比例。
ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    minHeight: 100,
    maxWidth: 200,
    maxHeight: 200,
  ),
  child: Container(),
)

这些是构建自适应布局的常用方法。你可以根据具体需求选择合适的方法或组合多种方法来实现灵活且响应式的布局。

相关文章
|
3月前
|
缓存 监控 前端开发
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
110 10
|
4天前
|
开发工具 Android开发 iOS开发
零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Flutter 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。 开发环境 在开始开发之前,请确保您的系统已安装以下软件: 操作系统:macOS 14.6 或更高版本 Flutter:版本 3.24.5(根据官网步骤进行安装) Git:用于代码版本控制 同时,您需要确保已经部署了最
39 9
|
3月前
|
开发框架 数据安全/隐私保护 开发者
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
70 7
|
3月前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
133 4
|
3月前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
181 2
|
4月前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
|
4月前
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式,包括线性布局(如Column和Row)、非线性布局(如Stack、Flex、Positioned)以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面,例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
115 1
|
3月前
|
Dart Android开发 开发者
Flutter跨平台开发实战:构建高性能移动应用
【10月更文挑战第25天】随着移动设备种类的增加,开发者面临跨平台应用开发的挑战。Flutter作为Google推出的开源UI工具包,凭借其强大的跨平台能力和高效的开发效率,成为解决这一问题的新方案。本文将介绍Flutter的核心优势、实战技巧及性能优化方法,通过一个简单的待办事项列表应用示例,帮助读者快速上手Flutter,构建高性能的移动应用。
63 0
|
7月前
|
存储 安全 数据安全/隐私保护
构建安全Flutter应用 - 6个实用技巧
随着越来越多的敏感用户数据在Flutter应用中流通,应用安全已成为首要关注点。本文为您总结6大关键Flutter应用安全最佳实践,帮助开发者筑牢应用安全防线,保护用户隐私。
174 1
构建安全Flutter应用 - 6个实用技巧
|
6月前
|
移动开发 Dart Android开发
构建未来:基于Flutter的跨平台移动应用开发
【7月更文挑战第52天】随着移动设备市场的多样化,跨平台移动应用的需求日益增长。传统的Android和iOS原生开发方式虽强大但成本较高,而新兴的跨平台框架如React Native、Xamarin等虽然提供了解决方案,但仍存在性能与体验上的妥协。本文将探讨使用Google推出的UI工具包Flutter进行高效、高性能的跨平台移动应用开发。我们将分析Flutter的核心架构,展示如何利用其丰富的组件库和高效的渲染引擎在Android和iOS之间实现无缝衔接,并讨论其在现代移动开发中的应用前景。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 6
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 7
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 1
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    39
  • 2
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    25
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    130
  • 4
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    27
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    68
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    86
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    67
  • 8
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    23
  • 10
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    114