【Android、IOS、Flutter、鸿蒙、ReactNative 】约束布局

Android XML 约束布局 参考

TextView居中

TextView 垂直居中并且靠右 

TextView 宽高设置百分比 

宽和高的比例

app:layout_constraintDimensionRatio="h,2:1" 表示子视图的宽高比为2:1,其中 h表示保持宽度不变,高度自动调整。

最大宽度 

设置最大宽度,超过这个宽度就会发生换行。

Android Compose 约束布局

导入依赖包

 启用Compose

Compose Text居中

//Compose  Text居中@Preview@Composablefun ConstraintLayoutCompose() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (text) = createRefs()Text(text = "Text 居中",modifier = Modifier.width(180.dp)// 宽度.height(200.dp)// 高度.background(color = Color.Cyan).constrainAs(text) {start.linkTo(parent.start)//位于父视图开始end.linkTo(parent.end)//位于父视图结束top.linkTo(parent.top)//位于父视图顶部bottom.linkTo(parent.bottom)//位于父视图底部},textAlign = TextAlign.Center,)}}

 Compose Text 垂直居中并且靠右

// Compose Text 垂直居中并且靠右@Preview@Composablefun ConstraintLayoutCompose() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (text) = createRefs()Text(text = "Text 居中",modifier = Modifier.width(180.dp)// 宽度.height(200.dp)// 高度.background(color = Color.Cyan).constrainAs(text) {end.linkTo(parent.end)//位于父视图结束top.linkTo(parent.top)//位于父视图顶部bottom.linkTo(parent.bottom)//位于父视图底部},textAlign = TextAlign.Center,)}}

Compose Text 宽高设置百分比 

// Compose Text 宽高设置百分比@Preview@Composablefun ConstraintLayoutCompose() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (text) = createRefs()Text(text = "Text 居中",modifier = Modifier.background(color = Color.Cyan).constrainAs(text) {start.linkTo(parent.start) // 位于父视图开始end.linkTo(parent.end)//位于父视图结束top.linkTo(parent.top)//位于父视图顶部bottom.linkTo(parent.bottom)//位于父视图底部// 设置宽度为父视图宽度的50%width = Dimension.percent(0.5F)// 设置高度为父视图宽度的50%height = Dimension.percent(0.5F)},textAlign = TextAlign.Center,)}}

 Compose Text 宽和高的比例 2:1

 // Compose Text 宽和高的比例 2:1@Preview@Composablefun ConstraintLayoutCompose() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (text) = createRefs()Text(text = "Text 居中",textAlign = TextAlign.Center,modifier = Modifier.background(color = Color.Cyan).constrainAs(text) {start.linkTo(parent.start) // 位于父视图开始end.linkTo(parent.end)//位于父视图结束top.linkTo(parent.top)//位于父视图顶部bottom.linkTo(parent.bottom)//位于父视图底部// 设置宽度为父视图宽度的100%width = Dimension.percent(1.0f)}.aspectRatio(2.0f)// 宽高比例 2:1)}}

 Compose Text 设置最大宽度

//Compose Text 设置最大宽度@Preview@Composablefun ConstraintLayoutCompose() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (text) = createRefs()Text(text = "Compose Text 设置最大宽度 Compose Text 设置最大宽度 Compose Text 设置最大宽度 ",textAlign = TextAlign.Start,modifier = Modifier.background(color = Color.Cyan).widthIn(max = 160.dp) // 设置最大宽度.constrainAs(text) {start.linkTo(parent.start) // 位于父视图开始end.linkTo(parent.end)//位于父视图结束top.linkTo(parent.top)//位于父视图顶部bottom.linkTo(parent.bottom)//位于父视图底部})}}

IOS Object-c 约束布局

pod init

如果不存在 Podfile 文件,切换到工程目录,就执行 pod init 命令

pod install

配置 Masonry 依赖 ,然后执行 pod install 命令

编译是遇到的问题  参考

 file not found libarclite_iphonesimulator.a

Podfile 中添加脚本 将Cocopods 引入的库的最低版本改为 iOS 11.0,再次执行 pod install 命令

UITextView 居中 

UITextView 垂直居中并且靠右

 

UITextView 宽和高的比例 2:1

UITextView 最大宽度

 

IOS Swifit 约束布局

pod init

如果不存在 Podfile 文件,切换到工程目录,就执行 pod init 命令

pod install

配置 Masonry 依赖 ,然后执行 pod install 命令

 UITextView 居中

 UITextView 垂直居中并且靠右

UITextView 宽和高的比例 2:1 

UITextView 最大宽度

 

Flutter 约束布局

配置依赖

pubspec.yaml 里面配置 flutter_constraintlayout 依赖

Flutter Text居中

// flutter text 居中显示Widget textCenter() {return ConstraintLayout(children: [Container(color: Colors.orange,alignment: Alignment.center,child: const Text('flutter text 居中'),).applyConstraint(width: 200.0,height: 100.0,centerTo: parent, // Text 居中)],);}

Flutter Text 垂直居中靠右显示

 // flutter text 垂直居中靠右显示Widget textVerticalCenterToRight() {return ConstraintLayout(children: [Container(color: Colors.orange,alignment: Alignment.center,child: const Text('flutter text 居中'),).applyConstraint(width: 200.0, height: 100.0, centerRightTo: parent // 垂直居中 靠右显示)],);}

Flutter Text 宽高设置百分比

// flutter text 宽高设置百分比
Widget textWidthHeightPercent() {return ConstraintLayout(children: [Container(color: Colors.orange,alignment: Alignment.center,child: const Text('flutter text 宽高设置百分比'),).applyConstraint(width: matchConstraint,height: matchConstraint,heightPercent: 0.5,widthPercent: 0.5,centerTo: parent)],);
}

Flutter Text 宽和高的比例 2:1

// flutter 宽高比例 2:1
Widget textWidthHeightRatio() {return ConstraintLayout(children: [Container(color: Colors.orange,alignment: Alignment.center,child: const Text('flutter 宽高比例 2:1'),).applyConstraint(width: 300,height: matchConstraint,widthHeightRatio: 2 / 1,centerTo: parent)],);
}

Flutter 设置最大宽度

// flutter 设置最大宽度
Widget textMaxWidth() {return ConstraintLayout(children: [Container(color: Colors.orange,alignment: Alignment.center,child:const Text('flutter 最大宽度 flutter 最大宽度 flutter 最大宽度 flutter 最大宽度'),).applyConstraint(maxWidth: 200, height: 400, centerTo: parent)],);
}

鸿蒙 布局 Flexbox

鸿蒙 Text 居中

@Entry
@Component
struct Index {build() {// 鸿蒙 Text 居中Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('鸿蒙 Text 居中').width('50%').height(80).textAlign(TextAlign.Center).backgroundColor(0xF5DEB3)}.width('100%').height('100%').backgroundColor(0xFFFFFFFF)}
}

 鸿蒙 Text 垂直居中靠右

@Entry
@Component
struct Index {build() {// 鸿蒙 Text 垂直居中靠右Flex({alignItems: ItemAlign.Center, //垂直居中justifyContent: FlexAlign.End //水平靠右}) {Text('鸿蒙 Text 居中').width('50%').height(80).textAlign(TextAlign.Center).backgroundColor(0xF5DEB3)}.width('100%').height('100%').backgroundColor(0xFFFFFFFF)}
}

 鸿蒙 宽和高的比例 2:1

@Entry
@Component
struct Index {build() {// 鸿蒙 宽和高的比例 2:1Flex({alignItems: ItemAlign.Center, //垂直居中justifyContent: FlexAlign.End //水平靠右}) {Text('鸿蒙 宽和高的比例 2:1').width('100%').aspectRatio(2) //宽高比例 2:1.textAlign(TextAlign.Center).backgroundColor(0xF5DEB3)}.width('100%').height('100%').backgroundColor(0xFFFFFFFF)}
}

 鸿蒙 Text 设置最大宽度

@Entry
@Component
struct Index {build() {// 鸿蒙 最大宽度Flex({alignItems: ItemAlign.Center, //垂直居中justifyContent: FlexAlign.Center //水平居中}) {Text('鸿蒙 最大宽度 鸿蒙 最大宽度 鸿蒙 最大宽度 鸿蒙 最大宽度').constraintSize({maxWidth: 160 //最大宽度}).textAlign(TextAlign.Center).backgroundColor(0xF5DEB3)}.width('100%').height('100%').backgroundColor(0xFFFFFFFF)}
}

ReactNative Flexbox

ReactNative Text 居中

import React from 'react';
import {AppRegistry,View,Text } from 'react-native';
import App from './App';
import {name as appName} from './app.json';const CenteredText = () => (<View style={{flex: 1,justifyContent: 'center',//内容垂直居中alignItems: 'center' // 内容水平居中}}><Text style={{backgroundColor: '#6200EE', // 背景颜色height:60.0, //高度width: '80%', // 宽度textAlign: 'center', // 文本水平居中color: '#ffffff', // 文本颜色textAlignVertical: 'center',//文本垂直居中}}>React Native 居中文本</Text></View>
);AppRegistry.registerComponent(appName, () => CenteredText);

 

执行 npm install 安装项目所需要的依赖

运行到安卓

采用 npx react-native run-android 或 npm start 运行

 

运行到IOS平台

采用 npx react-native run-ios 或 npm start 运行

 切换到iOS目录从新安装依赖 

// 清除缓存
pod cache clean  --all//移出本地 pod文件依赖
pod  deintegrate//执行安装显示下载信息
pod install --verbose --no-repo-update

 

ReactNative Text 垂直居中并且靠右

import React from 'react';
import {AppRegistry,View,Text } from 'react-native';
import App from './App';
import {name as appName} from './app.json';const CenteredText = () => (<View style={{flex: 1,justifyContent: 'center',//内容垂直居中alignItems: 'flex-end' // 内容居右}}><Text style={{backgroundColor: '#6200EE', // 背景颜色height:60.0, //高度width: '80%', // 宽度textAlign: 'center', // 文本水平居中color: '#ffffff', // 文本颜色textAlignVertical: 'center',//文本垂直居中}}>React Native 居中文本</Text></View>
);AppRegistry.registerComponent(appName, () => CenteredText);

ReactNative Text 宽和高的比例 2:1

import React from 'react';
import {AppRegistry,View,Text } from 'react-native';
import App from './App';
import {name as appName} from './app.json';const CenteredText = () => (<View style={{flex: 1,justifyContent: 'center',//内容垂直居中alignItems: 'center' // 内容水平居中}}><Text style={{backgroundColor: '#6200EE', // 背景颜色width: '80%', // 宽度textAlign: 'center', // 文本水平居中color: '#ffffff', // 文本颜色textAlignVertical: 'center',//文本垂直居中aspectRatio: 2, // 宽高比为2:1}}>ReactNative Text 宽和高的比例 2:1</Text></View>
);AppRegistry.registerComponent(appName, () => CenteredText);

ReactNative Text 最大宽度

import React from 'react';
import {AppRegistry,View,Text } from 'react-native';
import App from './App';
import {name as appName} from './app.json';const CenteredText = () => (<View style={{flex: 1,justifyContent: 'center',//内容垂直居中alignItems: 'center' // 内容水平居中}}><Text style={{backgroundColor: '#6200EE', // 背景颜色maxWidth: '50%', // 最大宽度textAlign: 'center', // 文本水平居中color: '#ffffff', // 文本颜色textAlignVertical: 'center',//文本垂直居中}}>ReactNative Text 最大宽度 ReactNative Text 最大宽度 ReactNative Text 最大宽度</Text></View>
);AppRegistry.registerComponent(appName, () => CenteredText);

案例

所属分支

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

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

相关文章

【机器学习】平均绝对误差(MAE:Mean Absolute Error)

平均绝对误差 (Mean Absolute Error, MAE) 是一种衡量预测值与实际值之间平均差异的统计指标。它在机器学习、统计学等领域中广泛应用&#xff0c;用于评估模型的预测精度。与均方误差 (MSE) 或均方误差根 (RMSE) 不同&#xff0c;MAE 使用误差的绝对值&#xff0c;因此它在处理…

【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)

先准备图片资源 推荐一个好用的图标素材网站&#xff0c;有很多免费资源。 Ic, fluent, animal, dog, filled icon - Free download 其他辅助工具&#xff0c;类似 AI 抠图去背景&#xff0c;实测效果还行&#xff0c;但是非免费。 美图秀秀-在线一键抠图&#xff0c;无需P…

Dial-insight:利用高质量特定领域数据微调大型语言模型防止灾难性遗忘

摘要 大型语言模型&#xff08;LLM&#xff09;的性能很大程度上依赖于底层数据的质量&#xff0c;特别是在专业领域。在针对特定领域应用微调LLM时&#xff0c;一个常见的挑战是模型泛化能力的潜在下降。为了解决这些问题&#xff0c;我们提出了一种两阶段方法来构建提示词&a…

品融电商:新形势下电商平台如何助力品牌长期经营

品融电商&#xff1a;新形势下电商平台如何助力品牌长期经营 在过去几年中&#xff0c;随着内容电商的兴起&#xff0c;一批新兴品牌通过精准的内容种草和互动营销迅速打开市场&#xff0c;实现了从“0到1”的品牌起步阶段。比如&#xff0c;新品牌SIINSIIN通过小红书等内容电商…

Springboot整合Prometheus+grafana实现系统监控

前言 Prometheus是一个开源的服务监控系统和时序数据库&#xff0c;它提供了强大的功能和灵活的架构&#xff0c;是目前主流的监控和管理应用系统的工具。 而Grafana是一个开源的数据可视化工具&#xff0c;与Prometheus集成&#xff0c;就可以可视化地监控系统的各个指标。 …

运行WHTools批量启动游戏房间工具提示要安装.Net Framework3.5解决

确认电脑能正常上网 点击下载并安装此功能&#xff0c;开始安装.Net Framework 3.5 安装成功 成功启动WHTools

怎么监控员工电脑?分享5个监控员工电脑的绝佳方法(立竿见影!建议收藏!)

怎么监控员工电脑&#xff1f; 在企业管理中&#xff0c;缺乏行之有效的监控时&#xff0c;便会滋生一些不当行为便&#xff0c;如偷偷浏览与工作无关的网站、泄露公司机密信息、甚至进行非法操作等。 为了有效管理员工电脑&#xff0c;确保企业信息安全&#xff0c;学会合理合…

监控录音如何消除杂音?降低录音噪音的五个技巧

在日常生活和工作中&#xff0c;监控录音的清晰度对信息获取极为重要。然而&#xff0c;录音过程中常会遇到各种杂音干扰&#xff0c;这些干扰可能来自环境噪音、设备故障等多种因素。为了提高录音质量&#xff0c;采取有效的杂音消除技术是必不可少的。监控录音如何消除杂音&a…

红日靶机(七)笔记

VulnStack-红日靶机七 概述 在 VulnStack7 是由 5 台目标机器组成的三层网络环境&#xff0c;分别为 DMZ 区、第二层网络、第三层网络。涉及到的知识点也是有很多&#xff0c;redis未授权的利用、laravel的历史漏洞、docker逃逸、隧道、代理的搭建、通达OA系统的历史漏洞、ms…

沃飞长空郭亮博士荣获中国航空航天月桂奖

11月11日晚&#xff0c;第十六届中国航空航天月桂奖颁奖典礼在珠海成功举办。本届月桂奖共有29个为中国航空航天事业做出突出贡献的团体与个人获奖&#xff0c;其中&#xff0c;沃飞长空CEO兼首席科学家郭亮博士因其在低空经济领域的突出贡献荣膺第十六届中国航空航天月桂奖“风…

WordPress 2024主题实例镜像

目录 隐藏 1 WordPress 2024主题实例镜像启用的插件 2 WordPress 2024主题实例镜像截图 WordPress 2024主题实例镜像启用的插件 WordPress 2024主题实例镜像启用了2024主题&#xff0c;配置了&#xff1a; Akismet 反垃圾评论插件 Admin Notices Manager仪表盘通知隐藏…

Nginx中实现流量控制(限制给定时间内HTTP请求的数量)示例

场景 流量控制 流量限制 (rate-limiting)&#xff0c;可以用来限制用户在给定时间内HTTP请求的数量。 流量限制可以用作安全目的&#xff0c;比如可以减慢暴力密码破解的速率&#xff0c; 更常见的情况是该功能被用来保护上游应用服务器不被同时太多用户请求所压垮。 流量…

探索 JNI - Rust 与 Java 互调实战

真正的救赎&#xff0c;并非厮杀后的胜利&#xff0c;而是能在苦难之中&#xff0c;找到生的力量和内心的安宁。 ——加缪Albert Camus 一、Rust Java &#xff1f; Java 和 Rust 是两种现代编程语言&#xff0c;各自具有独特的优势&#xff0c;适用于不同的应用场景。 1、…

使用HTML、CSS和JavaScript创建动态圣诞树

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…

3DTiles之i3dm介绍

3DTiles之i3dm介绍 3D Tiles 是一种用于高效存储和传输三维城市、建筑、地形、点云等空间数据的开放标准格式。i3dm&#xff08;Intel 3D Model&#xff09;是 3D Tiles 中用于表示三维模型&#xff08;如建筑物或其他对象&#xff09;的一个子格式。i3dm 格式的出现&#xff…

重新认识HTTPS

一. 什么是 HTTPS HTTP 由于是明文传输&#xff0c;所谓的明文&#xff0c;就是说客户端与服务端通信的信息都是肉眼可见的&#xff0c;随意使用一个抓包工具都可以截获通信的内容。 所以安全上存在以下三个风险&#xff1a; 窃听风险&#xff0c;比如通信链路上可以获取通信…

pycharm快速更换虚拟环境

目录 1. 选择Conda 虚拟环境2. 创建环境3. 直接选择现有虚拟环境 1. 选择Conda 虚拟环境 2. 创建环境 3. 直接选择现有虚拟环境

AI生活之我用AI处理Excel表格

AI生活之我用AI处理Excel表格 场景再现AI提问词AI代码运行调试结果心得感受 场景再现 因学习需要&#xff0c;整理了某个题库&#xff0c;方便自己刷题使用。 已将每套题打上了制定标签&#xff0c;得到一个Excel表格。截图如下&#xff1a; 需求是&#xff1a;一共35套题&…

Cesium加载大量点数据卡顿处理办法

1.使用entity绘制随机点 // 随机生成 1000 个点 const numPoints 1000;for (let i 0; i < numPoints; i) {const lon Math.random() * 360 - 180;const lat Math.random() * 180 - 90;const height 50000 Math.random() * 5000;// 将点添加到 Cesium Viewer 中viewer…

SCUI Admin + Laravel 整合

基于 Vue3 和 Element Plus 和 Laravel 整合开发 项目地址&#xff1a;持续更新 LaravelVueProject: laravel vue3 scui