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

Android XML 约束布局

TextView居中

TextView 垂直居中并且靠右

TextView 宽高设置百分比

宽和高的比例

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

最大宽度

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

Android Compose 约束布局

导入依赖包

启用Compose

Compose Text居中

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConstraintLayoutCompose()
        }
    }

    @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 垂直居中并且靠右

@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 宽高设置百分比

@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

@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 设置最大宽度

@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 命令

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);

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);

案例

切换到分支 flutter_constraint_layout