当前位置： 首页 > article >正文

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

article 2024/12/27 15:57:09

Android XML 约束布局 参考

TextView居中

TextView 垂直居中并且靠右 

TextView 宽高设置百分比 

宽和高的比例

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

最大宽度 

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

Android Compose 约束布局

导入依赖包

 启用Compose

Compose Text居中

//Compose  Text居中
    @Preview
    @Composable
    fun 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
    @Composable
    fun 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
    @Composable
    fun 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
    @Composable
    fun 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
    @Composable
    fun 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:1
    Flex({
      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.kler.cn/a/391285.html

相关文章：

  • CSS（二）：美化网页元素
  • Redis - Token JWT 概念解析及双token实现分布式session存储实战
  • 【系统架构设计师】真题论文: 论软件测试中缺陷管理及其应用（包括解题思路和素材）
  • 人工智能ACA（七）——计算机视觉基础
  • 细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV
  • 攻防世界 cookie
  • 鸿蒙进阶-属性动画
  • 移远通信亮相骁龙AI PC生态科技日，以领先的5G及Wi-Fi产品革新PC用户体验
  • 【缓存策略】你知道 Cache Aside（缓存旁路）这个缓存策略吗
  • 在JPA和EJB中用乐观锁解决并发问题
  • 前端模拟面试：7个JavaScript数组进阶面试题
  • 为什么go语言使用log.Fatalf打印日志导致程序退出
  • 第二天python笔记
  • 「实战应用」如何用图表控件LightningChart .NET在WPF中制作表格？（二）
  • 如何查看电脑关机时间
  • 《JavaEE进阶》----20.＜基于Spring图书管理系统①（登录+添加图书）＞
  • Redis7：商户查询缓存1
  • 【Linux-进程信号】信号入门介绍
  • 网络安全CTF竞赛模式、题目类别、所用工具小结
  • 比 PyTorch 更快的嵌入Python库：FastEmbed
  • django入门【05】模型介绍——字段选项（二）
  • 算法——移除元素（leetcode27）
  • el-input 正则表达式校验输入框不能输入汉字
  • 工位管理现代化：Spring Boot企业级框架
  • WPF 应用程序中使用 Prism 框架时，有多种方式可以注册服务和依赖项
  • 最大子数组和