Flutter组件适配方法实现详解

Flutter组件适配 Flutter组件 Android Flutter适配组件 2022-11-13 19:11:16 313人浏览薄情痞子

摘要

目录Flutter 适配组件1. MediaQuery2. LayoutBuilder3. OrientationBuilder4. Expanded 和 Flexible5. Fr

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) => Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'View 2\n\n' +
                        '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' +
                        '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}',
                    style: TextStyle(color: CustomColors.android, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. OrientationBuilder

要确定当前 Widget 的方向，可以使用 OrientationBuilder 组件。这里的方向与 MediaQuery 提供的设备方向不同。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Orientation deviceOrientation = MediaQuery.of(context).orientation;
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: CustomColors.android,
              child: OrientationBuilder(
                builder: (context, orientation) => Center(
                  child: Text(
                    'View 1\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: OrientationBuilder(
              builder: (context, orientation) => Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'View 2\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: CustomColors.android, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. Expanded 和 Flexible

Expanded 和 Flexible 这两个组件可以和 Column/Row 搭配使用，来实现非常完美的自适应效果。Expanded 可以用来拓展 Row, 、Column 和 Flex，从而让子组件填充可用空间，Flexible 功能类似但并不一定能填充全部可用空间。

下面这个例子演示了混合使用 Expanded 和 Flexible 的各种方式：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                ExpandedWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(
              children: [
                ExpandedWidget(),
                ExpandedWidget(),
              ],
            ),
            Row(
              children: [
                FlexibleWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(
              children: [
                FlexibleWidget(),
                ExpandedWidget(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.android,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Expanded',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}
class FlexibleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.androidAccent,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Flexible',
            style: TextStyle(color: CustomColors.android, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

5. FractionallySizedBox

FractionallySizedBox 组件可以使子组件填充部分可用空间，该特性在 Expanded 或 Flexible 中特别有用。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.4),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.6),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.8),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 1.0),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
class FractionallySizedWidget extends StatelessWidget {
  final double widthFactor;
  FractionallySizedWidget({@required this.widthFactor});
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: FractionallySizedBox(
        alignment: Alignment.centerLeft,
        widthFactor: widthFactor,
        child: Container(
          decoration: BoxDecoration(
            color: CustomColors.android,
            border: Border.all(color: Colors.white),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              '${widthFactor * 100}%',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

6. AspectRatio

AspectRatio 组件可以直接指定子组件的固定宽高比例，使用时，我们可以使用布局约束的最大宽度，并给定一个宽高比自适应其高度

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            AspectRatioWidget(ratio: '16 / 9'),
            AspectRatioWidget(ratio: '3 / 2'),
          ],
        ),
      ),
    );
  }
}
class AspectRatioWidget extends StatelessWidget {
  final String ratio;
  AspectRatioWidget({@required this.ratio});
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: Fraction.fromString(ratio).toDouble(),
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.android,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Text(
              'AspectRatio - $ratio',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

到此这篇关于Flutter组件适配方法实现详解的文章就介绍到这了,更多相关Flutter组件适配内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Flutter组件适配方法实现详解

本文链接: https://www.lsjlt.com/news/170487.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Flutter组件适配方法实现详解

目录Flutter 适配组件1. MediaQuery2. LayoutBuilder3. OrientationBuilder4. Expanded 和 Flexible5. Fr...

99+

2022-11-13

Flutter组件适配 Flutter组件 Android Flutter适配组件
Flutter投票组件使用方法详解

本文实例为大家分享了Flutter投票组件的使用方法，供大家参考，具体内容如下前景基于公司项目需求，仿照微博实现投票功能。开发遇到的问题 1.选项列表的高度，自适应的问题；2....

99+

2022-11-13
Flutter滚动组件之ListView使用方法详解

ListView ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。我们看看ListView的默认构造函数定义...

99+

2022-11-13
Flutter多选按钮组件Checkbox使用方法详解

Flutter 中的多选按钮组件有两种，供大家参考，具体内容如下 1. Checkbox 多选按钮，一般用来表现一些简单的信息。常用属性如下： (1). value 多...

99+

2022-11-12
Flutter之可滚动组件实例详解

目录正文Scrollable主轴和纵轴ViewportSliver可滚动组件的通用配置ScrollController子节点缓存Scrollbar总结正文当内容超过显示视口(Vie...

99+

2022-11-13

Flutter 可滚动组件 Flutter 组件
Flutter折叠控件使用方法详解

本文实例为大家分享了Flutter折叠控件使用的具体代码，供大家参考，具体内容如下 1.官方折叠控件ExpansionTiles 官方默认提供了一个折叠控件 ExpansionTil...

99+

2022-11-13
iOS13适配的实现方法

1.私有KVC [self setValue:baseTabBar forKey:@"tabBar"]; //正常 [_textField setValue:[UIColor...

99+

2022-06-02

iOS13 适配
Javascript实现Vue跨组件通信的方法详解

目录概述思路要清晰实现要迅猛测试效果优化总结概述我们都知道。 xxx.$on可以订阅一个消息。 xxx.$emit可以发布一个消息。 xxx.$off可以取消订阅一个消息。思路要...

99+

2022-11-13
JavaScript实现组件化和模块化方法详解

目录组件化和模块化模块化组件化Vue中的组件化组件化和模块化为什么会有组件化和模块化？当我们的项目复杂度不断上升，项目维护成本逐渐提高之后，对于旧项目的维护就变得格外困难。前端如果...

99+

2023-05-20

JS组件化和模块化 JS组件化 JS模块化
Android ListView适配器（Adapter）优化方法详解

Android ListView的优化，在做Android项目的时候，在用到ListView 界面及数据显示，这个时候如果资源过大，对项目来说，用户体验肯定是不好的，这里就对如...

99+

2022-06-06

方法 adapter listview 优化 Android
Flutter配置代理抓包实现过程详解

目录背景工具准备配置Flutter代理方式一、http请求库配置代理web_socket_channel配置代理方式二、重写原生方法背景在开发Flutter中，我们经常需要对网络...

99+

2023-02-13

Flutter配置抓包 Flutter 配置抓包
Vue父子组件属性传递实现方法详解

目录前言组件之间属性的传递父组件传递属性给子组件子组件传递属性给父组件前言这节我们主要从案例出发，用Vue3的写法写父子组件之间的属性传递。组件之间属性的传递我们定义一个Rat...

99+

2023-02-08

Vue父子组件属性传递 Vue属性传递 Vue父子组件传递
React组件通信实现方式详解

目录1. 父子组件通信方式父传子子传父2. 非父子组件通信方式1. 父子组件通信方式 ✨父子组件之间的通信很常见，其中父组件可以通过props，原型方法向子组件通信，同时子组件也可以...

99+

2023-03-19

React组件通信 React通信 React组件通信的方式
vue实现父组件获取子组件的方法或属性值详解

目录父组件获取子组件方法或属性值这里主要使用了vue的$ref父组件获取子组件中的变量案例一：点击父组件的按钮，操作子组件显示案列二：获取子组件data中的变量父组件获取子组件方法或...

99+

2022-11-13
Flutter控制组件显示和隐藏三种方式详解

目录方式一：if语句控制方式二：Offstage组件方式三： VisibilityOffstage和Visibility的区别：方式一：if语句控制 // 例如： Column( ...

99+

2022-11-13

Flutter控制组件显示隐藏 Flutter 控制组件
Flutter快速制作一个水印组件实例详解

目录正文通过child属性将水印叠加给子组件createWatermark方法Watermark组件的完整代码正文项目开发的过程中，经常会遇到添加水印的需求，其作用无非就是防止重...

99+

2023-01-30

Flutter制作水印组件 Flutter 水印组件
React父组件调用子组件中的方法实例详解

目录Class组件1. 自定义事件2. 使用 React.createRef()3. 使用回调RefsFunction组件补充：子组件调用父组件方法总结文章中涉及 ref 的应用仅为...

99+

2022-11-13
React中实现keepalive组件缓存效果的方法详解

目录背景结构代码背景由于react官方并没有提供缓存组件相关的api（类似vue中的keepalive），在某些场景，会使得页面交互性变的很差，比如在有搜索条件的表格页面，点击某一...

99+

2023-01-14

React keepalive组件缓存效果 React keepalive组件缓存 React keepalive缓存 React keepalive
详解React hooks组件通信方法

目录一、前言二、父子组件通信1）父组件传值给子组件2）子组件传值给父组件3）跨组件传值（父传孙子组件）一、前言组件通信是React中的一个重要的知识点，下面列举一下 react h...

99+

2022-11-13
aspjpeg组件使用方法284435详解

1、什么是AspJpeg？ AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文文章并不多，即使有一般也只是牵涉到图片缩...

99+

2023-05-20

aspjpeg组件使用方法