Flutter 实现按位置大小比例布局的控件

文章目录

  • 前言
  • 一、如何实现？
    • 1、数值转成分数
    • 2、Row+Flexible布局横向
    • 3、Column+Flexible布局纵向
  • 二、完整代码
  • 三、使用示例
    • 1、基本用法
    • 2、四分屏
    • 3、六分屏
    • 4、八分屏
    • 5、九分屏
    • 6、414分屏
  • 总结

前言

做视频监控项目时需要需要展示多分屏，比如2x2、3x3、414等等，如果每一种分屏都单独实现会很麻烦，而且不能支持用户定制。最好的方式还是实现一个通用的分屏容器，而且采样比例计算位置大小，可以适配任意尺寸。

一、如何实现？

最直观的实现方式是获取控件宽高然后按比例计算，但是flutter在build的时候无法获取位置宽高信息，只有绘制之后才能获取，所以这种方式并不容易实现，比较简单的方式应该是使用Row、Column结合Flexible。

1、数值转成分数

需要转换的数值

 final Rect rect; //子控件位置大小,比例值范围0-1

定义一个分数对象

//分数
class Rational {int den = 1; //分母int num = 0; //分子Rational(this.num, this.den);//通过double构造，accuracy小数点后精度factory Rational.fromDouble(double d, {int accuracy = 5}) {int den = 1;while (d > d.toInt() && accuracy-- > 0) {d *= 10;den *= 10;}return Rational(d.toInt(), den);}
}

转成分数并对齐分母

    //将位置大小转成分数final width = Rational.fromDouble(rect.width);final x = Rational.fromDouble(rect.left);final height = Rational.fromDouble(rect.height);final y = Rational.fromDouble(rect.top);//对齐分母if (width.den != x.den) {final den = width.den;width.den *= x.den;width.num *= x.den;x.den *= den;x.num *= den;}//对齐分母if (height.den != y.den) {final den = height.den;height.den *= y.den;height.num *= y.den;y.den *= den;y.num *= den;}

2、Row+Flexible布局横向

我们利用Row的自动布局，以及Flexible的比例布局的特性，根据上面的分数计算出控件比例的位置大小对应的flex值即可。

 Row(children: [Flexible(flex: x.num,child: Container(),),Flexible(flex: width.num,child: child/*子控件，加上纵向布局则是Column*/),Flexible(flex: width.den - width.num - x.num, child: Container()),],);}

3、Column+Flexible布局纵向

我们利用Column的自动布局，以及Flexible的比例布局的特性，根据上面的分数计算出控件比例的位置大小对应的flex值即可。

Column(children: [Flexible(flex: y.num,child: Container(),),Flexible(flex: height.num, child: child/*子控件*/),Flexible(flex: height.den - height.num - y.num,child: Container(),),],)

二、完整代码

proportion.dart

import 'package:flutter/material.dart';//比例布局控件,
class Proportion extends StatelessWidget {final Rect rect; //位置大小,比例值范围0-1final Widget child;const Proportion({super.key,this.rect = const Rect.fromLTWH(0, 0, 1, 1),required this.child,});@overrideWidget build(BuildContext context) {//实现按比例显示布局final width = Rational.fromDouble(rect.width);final x = Rational.fromDouble(rect.left);final height = Rational.fromDouble(rect.height);final y = Rational.fromDouble(rect.top);if (width.den != x.den) {final den = width.den;width.den *= x.den;width.num *= x.den;x.den *= den;x.num *= den;}if (height.den != y.den) {final den = height.den;height.den *= y.den;height.num *= y.den;y.den *= den;y.num *= den;}return Row(children: [Flexible(flex: x.num,child: Container(),),Flexible(flex: width.num,child: Column(children: [Flexible(flex: y.num,child: Container(),),Flexible(flex: height.num, child: child),Flexible(flex: height.den - height.num - y.num,child: Container(),),],),),Flexible(flex: width.den - width.num - x.num, child: Container()),],);}
}//分数
class Rational {int den = 1; //分母int num = 0; //分子Rational(this.num, this.den);//通过double构造，accuracy小数点后精度factory Rational.fromDouble(double d, {int accuracy = 5}) {int den = 1;while (d > d.toInt() && accuracy-- > 0) {d *= 10;den *= 10;}return Rational(d.toInt(), den);}
}

常用布局（可选）
proportions.dart

import 'package:flutter/material.dart';import 'proportion.dart';//常用布局,需配合stack作为父容器使用
class Proportions {Proportions._();//全屏static List<Proportion> fullScreen({required Widget child,}) =>[Proportion(rect: const Rect.fromLTWH(0, 0, 1, 1),child: child,)];//二分屏static List<Proportion> halfScreen({required Widget left,required Widget right,}) =>[Proportion(rect: const Rect.fromLTWH(0, 0, 0.5, 1),child: left,),Proportion(rect: const Rect.fromLTWH(0.5, 0, 0.5, 1),child: right,),];//四分屏static List<Proportion> quadScreen({required List<Widget> children,}) {return [Proportion(rect: const Rect.fromLTWH(0, 0, 0.5, 0.5),child: children[0],), //左上Proportion(rect: const Rect.fromLTWH(0.5, 0, 0.5, 0.5),child: children[1],), //右上Proportion(rect: const Rect.fromLTWH(0, 0.5, 0.5, 0.5),child: children[2],), //左下Proportion(rect: const Rect.fromLTWH(0.5, 0.5, 0.5, 0.5),child: children[3],), //右下];}//6  分屏static List<Proportion> sixScreen({required List<Widget> children,}) {return [Proportion(rect: const Rect.fromLTWH(0, 0, 0.666, 0.666),child: children[0],), //左上Proportion(rect: const Rect.fromLTWH(0.666, 0, 0.333, 0.333),child: children[1],), //右上Proportion(rect: const Rect.fromLTWH(0.666, 0.333, 0.333, 0.333),child: children[2],), //右中Proportion(rect: const Rect.fromLTWH(0.666, 0.666, 0.333, 0.333),child: children[3],), //右下Proportion(rect: const Rect.fromLTWH(0.333, 0.666, 0.333, 0.333),child: children[4],), //中下Proportion(rect: const Rect.fromLTWH(0, 0.666, 0.333, 0.333),child: children[5],), //左下];}//8  分屏static List<Proportion> eightScreen({required List<Widget> children,}) {return [Proportion(rect: const Rect.fromLTWH(0, 0, 0.75, 0.75),child: children[0],), //左上Proportion(rect: const Rect.fromLTWH(0.75, 0, 0.25, 0.25),child: children[1],), //右上Proportion(rect: const Rect.fromLTWH(0.75, 0.25, 0.25, 0.25),child: children[2],), //右中1Proportion(rect: const Rect.fromLTWH(0.75, 0.5, 0.25, 0.25),child: children[3],), //右中2Proportion(rect: const Rect.fromLTWH(0.75, 0.75, 0.25, 0.25),child: children[4],), //右下Proportion(rect: const Rect.fromLTWH(0.5, 0.75, 0.25, 0.25),child: children[5],), //中下2Proportion(rect: const Rect.fromLTWH(0.25, 0.75, 0.25, 0.25),child: children[6],), //中下1Proportion(rect: const Rect.fromLTWH(0, 0.75, 0.25, 0.25),child: children[7],), //左下];}//9  分屏static List<Proportion> nightScreen({required List<Widget> children,}) {int n = 0;return [...children.getRange(0, 9).map((element) {final i = n++;return Proportion(rect: Rect.fromLTWH((i % 3) * 0.333,(i ~/ 3) * 0.333,0.333,0.333,),child: element,);},)];}//16  分屏static List<Proportion> sixteenScreen({required List<Widget> children,}) {int n = 0;return [...children.getRange(0, 16).map((element) {final i = n++;return Proportion(rect: Rect.fromLTWH((i % 4) * 0.25, (i ~/ 4) * 0.25, 0.25, 0.25),child: element,);},)];}//414分屏static List<Proportion> fourOneFourScreen({required List<Widget> children,}) {int n = 0;return [//左4...children.getRange(0, 4).map((element) {final i = n++;return Proportion(rect: Rect.fromLTWH((i ~/ 4) * 0.25, (i % 4) * 0.25, 0.25, 0.25),child: element,);},),//中间Proportion(rect: const Rect.fromLTWH(0.25, 0, 0.5, 1),child: children[4],),//右边4...children.getRange(5, 9).map((element) {final i = n++ + 8;return Proportion(rect: Rect.fromLTWH((i ~/ 4) * 0.25, (i % 4) * 0.25, 0.25, 0.25),child: element,);},)];}
}

三、使用示例

1、基本用法

设置子控件位置大小。一般配合stack作为父容器使用

    Proportion(rect: Rect.fromLTRB(0, 0, 0.5, 0.5), //子控件位置大小，(0, 0, 0.5, 0.5)表示左上1/4的区域child: ColoredBox(color: Colors.red), //子控件);

2、四分屏

final List<int> _nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 Stack(children: Proportions.quadScreen(children: [..._nums.map((e) => Container(constraints: const BoxConstraints.expand(),decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple.shade300)),child: Center(child: Text("video $e")),))

在这里插入图片描述

3、六分屏

final List<int> _nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 Stack(children: Proportions.sixScreen(children: [..._nums.map((e) => Container(constraints: const BoxConstraints.expand(),decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple.shade300)),child: Center(child: Text("video $e")),))

在这里插入图片描述

4、八分屏

final List<int> _nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 Stack(children: Proportions.eightScreen(children: [..._nums.map((e) => Container(constraints: const BoxConstraints.expand(),decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple.shade300)),child: Center(child: Text("video $e")),))

在这里插入图片描述

5、九分屏

final List<int> _nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 Stack(children: Proportions.nightScreen(children: [..._nums.map((e) => Container(constraints: const BoxConstraints.expand(),decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple.shade300)),child: Center(child: Text("video $e")),))

在这里插入图片描述

6、414分屏

final List<int> _nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 Stack(children: Proportions.fourOneFourScreen(children: [..._nums.map((e) => Container(constraints: const BoxConstraints.expand(),decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple.shade300)),child: Center(child: Text("video $e")),))

在这里插入图片描述
始终保持比例
在这里插入图片描述

总结

以上就是今天要讲的内容，本文用的是比较简单的方式实现了比例布局控件，其主要特点是可以灵活使用，尤其是方便视频分屏预览的实现。本质上也是对一类布局规则的总结得出的一个通用的控件，因为考虑到2x2、3x3还是可以写死的，但是到了4x4、5x5写死则需要16、25个参数，那就必须改用数组，也就意味着需要根据规则计算位置，那和本文一样了。所以本文的控件是有实际使用意义的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/74866.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

性能优化点

性能优化点

Arts and Sciences - Computer Science | myUSF 索引3层&#xff08;高度为3&#xff09;一般对于数据库地址千万级别的表 大于2000万的数据进行分库分表存储 JVM整体结构及内存模型 JVM调优&#xff1a;主要为减少FULL GC的执行次数或者减少FULL GC执行时间 Spring Boot程序…
阅读更多...
微信小程序：点击按钮实现数据加载（带模糊查询）

微信小程序：点击按钮实现数据加载（带模糊查询）

效果图 代码 wxml: <!-- 搜索框--> <form action"" bindsubmit"search_all_productiond"><view class"search_position"><view class"search"><view class"search_left">工单号:</view…
阅读更多...
分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测…
阅读更多...
【Java Web基础】mvn命令、Maven的安装与配置

【Java Web基础】mvn命令、Maven的安装与配置

本文极大程度上来自Maven安装(超详解)&#xff0c;但是担心安的过程中遇到什么不一样的问题&#xff0c;顺便加深印象&#xff0c;所以还是打算自己弄一篇。 目录 第一步&#xff1a;Download Maven第二步&#xff1a;解压与安装2.1 解压2.2 安装 第一步&#xff1a;Download …
阅读更多...
不需要C盘清理软件，这样清理c盘也很有效！

不需要C盘清理软件，这样清理c盘也很有效！

“救命&#xff01;电脑c盘又红了&#xff01;感觉每次用电脑都在清理c盘&#xff0c;已经累了&#xff0c;大家有什么比较好的c盘清理软件或者方法可以给我推荐推荐吗&#xff1f;” 电脑的c盘为我们保存了很多重要的文件和系统资料。因此&#xff0c;我们可能会发现&#xff…
阅读更多...
无涯教程-Lua - for语句函数

无涯教程-Lua - for语句函数

for 循环是一种重复控制结构&#xff0c;可让您有效地编写需要执行特定次数的循环。 for loop - 语法 Lua编程语言中 for 循环的语法如下- for init,max/min value, increment dostatement(s) end 这是 for 循环中的控制流程- 首先执行 init 步骤&#xff0c;并且仅执行一…
阅读更多...
网络安全漏洞（风险）扫描类型

网络安全漏洞（风险）扫描类型

漏洞&#xff08;风险&#xff09;扫描是保障现代企业数字化转型安全开展过程中一个至关重要的组成部分&#xff0c;可以帮助企业识别数字化系统和应用中的各类安全缺陷。在实际应用时&#xff0c;漏洞扫描的类型需要和它们能够保护的IT环境保持一致。如果充分了解不同类型漏洞…
阅读更多...
QT中使用ffmpeg的api进行视频的播放

QT中使用ffmpeg的api进行视频的播放

在了解ffmpeg使用api进行视频的播放之前&#xff0c;我们首先了解一下视频的播放流程。 一、视频的播放流程 首先是我们最常见的视频文件&#xff0c;在播放流程中首先是要打开视频文件&#xff0c;将视频文件中的数据进行解封装&#xff0c;之后再将解封装之后的视频进行解码…
阅读更多...
单片机中的通用LED驱动

单片机中的通用LED驱动

前言 项目中需要用到很多的LED灯&#xff0c;存在不同的闪烁方式&#xff0c;比如单闪&#xff0c;双闪&#xff0c;快闪&#xff0c;慢闪等等&#xff0c;我需要一个有如下特性的LED驱动 方便的增加不同闪烁模式可以切换闪烁模式增加LED数目不会有太多的改动方便移植&#x…
阅读更多...
Stable Diffusion 硬核生存指南：WebUI 中的 VAE

Stable Diffusion 硬核生存指南：WebUI 中的 VAE

本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议&#xff0c;欢迎转载、或重新修改使用&#xff0c;但需要注明来源。 署名 4.0 国际 (CC BY 4.0) 本文作者: 苏洋 创建时间: 2023年07月30日 统计字数: 11485字 阅读时间: 23分钟阅读 本文链接: https://soulteary.com/2023/07…
阅读更多...
MySQL实用命令

MySQL实用命令

一、 DISTINCT 去重 案例&#xff1a;user_test表对班级字段进行去重操作 SELECT DISTINCT class FROM user_test 二、 的作用 案例&#xff1a; SELECT NULL10 三、 concat 实现连接字符串 ​​​案例&#xff1a; SELECT CONCAT(NAME,class) AS 姓名班级 FROM user_test 四…
阅读更多...
【多模态】23、RO-ViT | 基于 Transformer 的开发词汇目标检测（CVPR2023）

【多模态】23、RO-ViT | 基于 Transformer 的开发词汇目标检测（CVPR2023）

文章目录 一、背景二、方法2.1 基础内容2.2 Region-aware Image-text Pretraining2.3 Open-vocabulary Detector Finetuning 三、效果3.1 细节3.2 开放词汇目标检测效果3.3 Image-text retrieval3.4 Transfer object detection3.5 消融实验 论文&#xff1a;Region-Aware Pretr…
阅读更多...
《网络是怎样连接的》（二.2）

《网络是怎样连接的》（二.2）

(6条消息) 《网络是怎样连接的》&#xff08;二.1&#xff09;_qq_38480311的博客-CSDN博客 本文主要取材于 《网络是怎样连接的》 第二章 2.5 2.6章节。 目录 简述&#xff1a; 本文的主要内容是 以太网的收发操作 和 UDP协议的收发操作。 IP与以太网的包收发操作 包是什…
阅读更多...
蓝海卓越计费管理系统任意文件读取下载

蓝海卓越计费管理系统任意文件读取下载

看了大佬的文章&#xff0c;太牛逼啦&#xff0c;下面是大佬文章原文。 蓝海卓越计费管理系统任意文件读取下载 鹰图语法&#xff1a;web.title"蓝海卓越计费管理系统" 访问url 直接更改url就行了 /download.php?file../../../../../etc/passwd
阅读更多...
我能“C“——扫雷游戏

我能“C“——扫雷游戏

一.前言&#xff1a; 扫雷游戏&#xff0c;一款经典的游戏&#xff0c;没玩过的话也可以试着玩一玩&#xff0c;这样对写扫雷游戏这个小游戏的化是会有一个很好的思路的。那么本片博客就来介绍如何实现扫雷游戏的具体步骤。扫雷游戏链接&#x1f449; 扫雷游戏网页版 - Minesw…
阅读更多...
【MMCV】mmpretrain/mmclassification概览、环境安装与验证

【MMCV】mmpretrain/mmclassification概览、环境安装与验证

概览 MMPretrain 是一个全新升级的预训练开源算法框架，旨在提供各种强大的预训练主干网络， 并支持了不同的预训练策略。MMPretrain 源自著名的开源项目 MMClassification 和 MMSelfSup，并开发了许多令人兴奋的新功能。 目前，预训练阶段对于视觉识别至关重要，凭借丰富而强…
阅读更多...
GPT Prompt编写的艺术：如何提高AI模型的表现力

GPT Prompt编写的艺术：如何提高AI模型的表现力

随着AI技术的迅速发展&#xff0c;人工智能模型变得越来越强大&#xff0c;能够协助我们完成各种任务。然而&#xff0c;如何更好地利用AI的能力仍然存在很大的探索空间。在与AI进行交互的过程中&#xff0c;我们主要依赖于Prompt&#xff0c;不管是直接与大模型交互&#xff0…
阅读更多...
Simulink仿真模块 - Relay

Simulink仿真模块 - Relay

目录 说明 模块特性 Relay是在两个常量输出之间进行切换。 在仿真库中的位置为：Simulink / Discontinuitie模型为： 说明 Relay 模块的输出在两个指定值之间切换。打开中继时，它会一直保持打开，直到输入低于 Switch off point 参数的值为止。关闭中继时，它会一直保持关闭…
阅读更多...
[C++项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍...

[C++项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍...

项目背景 Boost库是C中一个非常重要的开源库. 它实现了许多C标准库中没有涉及的特性和功能, 一度成为了C标准库的拓展库. C新标准的内容, 很大一部分脱胎于Boost库中. Boost库的高质量代码 以及 提供了更多实用方便的C组件, 使得Boost库在C开发中会被高频使用 为方便开发者学…
阅读更多...
Excel功能总结

Excel功能总结

1&#xff09;每一张表格上都打印表头 “页面布局”-->“打印标题”-->页面设置“工作表”页-->打印标题“顶端标题行” 如&#xff1a;固定第1~2行&#xff0c;设置成“$1:$2” 2&#xff09;将页面内容打印在一页【缩印】 1.选好需要打印的区域&#xff0c;“页面布…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发