设计了网站,网站二次开发是什么,开放平台建设,关于网站建设案例查看全部组件 https://blog.csdn.net/b275518834/article/details/144751353
BoxWithConstraints
功能说明#xff1a;它是 Jetpack Compose 中的关键布局组件#xff0c;能够精准捕捉自身所在容器的尺寸约束信息#xff0c;通过获取最大宽度和最大高度这两个关键属性它是 Jetpack Compose 中的关键布局组件能够精准捕捉自身所在容器的尺寸约束信息通过获取最大宽度和最大高度这两个关键属性为开发者开启一扇通往自适应布局世界的大门。开发者得以依据这些尺寸数据灵动地调整内部子组件的布局策略、样式呈现乃至显示逻辑。无论是在屏幕尺寸多变的移动设备上还是应对不同分辨率的桌面端都能确保界面元素有条不紊地排列合理利用每一寸空间实现从紧凑小屏到宽敞大屏的完美适配。
示例场景以一款阅读类应用为例当用户在手机上打开书籍详情页面时BoxWithConstraints 可以根据屏幕的实际宽度判断若宽度较窄就将书籍封面图片、书名、作者等信息纵向排列确保文字清晰可读各元素不拥挤而当应用运行在平板等大屏设备上一旦检测到较大的 maxWidth 和 maxHeight便可将封面图片放大置于左侧书名、作者、简介等信息以合适的字体和间距横向排列在右侧充分利用大屏优势提升视觉体验。再如在社交分享界面若 maxWidth 有限分享按钮与取消按钮会紧凑排列在底部文案区域自适应变窄若处于宽屏状态按钮间距拉大文案区域舒展还可适时展示相关的热门话题标签让分享功能更加醒目、易用完美契合不同设备形态下的用户需求。
package org.lxz.project.compose.demoimport androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
object BoxWithConstraintsDemo {private val elementPadding: Dp 8.dpComposablefun boxWithConstraintsExample() {// 使用BoxWithConstraints组件作为外层容器使其占满可用空间BoxWithConstraints(modifier Modifier.fillMaxSize()) {// 获取BoxWithConstraints组件所在容器的最大可用宽度val maxWidth this.maxWidth// 获取BoxWithConstraints组件所在容器的最大可用高度val maxHeight this.maxHeight// 展示获取到的最大宽度和最大高度信息可以用于调试或者根据其做进一步决策Text(text Max Width: ${maxWidth.value} dp, Max Height: ${maxHeight.value} dp,modifier Modifier.padding(16.dp).offset(y 15.dp))// 根据宽高比来决定采用水平排列还是垂直排列布局方式if (maxWidth maxHeight) {// 宽度大于高度采用水平排列Row布局Row(modifier Modifier// 让Row组件占满整个可用空间.fillMaxSize()// 设置子组件在水平方向上的内边距为16.dp使布局看起来更美观.padding(horizontal 16.dp),horizontalArrangement Arrangement.SpaceEvenly) {// 第一个子组件宽度占比可根据需求调整这里示例设为总宽度的1/3Text(text Left Text,modifier Modifier.width(maxWidth / 3).padding(elementPadding))// 第二个子组件占剩余宽度空间通过weight实现按比例分配空间Column(modifier Modifier// 设置权重为1f表示占剩余的水平空间比例.weight(1f)// 让Column组件在垂直方向上占满可用空间.fillMaxHeight().padding(elementPadding)) {Text(text Top Text in Middle Column, modifier Modifier.padding(elementPadding))Button(onClick { /* 处理按钮点击事件 */ },modifier Modifier.padding(elementPadding)) {Text(text Click Me, modifier Modifier.padding(elementPadding))}Text(text Bottom Text in Middle Column, modifier Modifier.padding(elementPadding))}// 第三个子组件宽度同样占总宽度的1/3Text(text Right Text,modifier Modifier.width(maxWidth / 3).padding(elementPadding))}} else {// 高度大于宽度采用垂直排列Column布局Column(modifier Modifier// 让Column组件占满整个可用空间.fillMaxSize()// 设置子组件在垂直方向上的内边距为16.dp使布局更美观.padding(vertical 16.dp),verticalArrangement Arrangement.SpaceEvenly) {// 第一个子组件高度占比可根据需求调整这里示例设为总高度的1/3Text(text Top Text,modifier Modifier.height(maxHeight / 3).padding(elementPadding))// 第二个子组件占剩余高度空间通过weight实现按比例分配空间Row(modifier Modifier// 设置权重为1f表示占剩余的垂直空间比例.weight(1f)// 让Row组件在水平方向上占满可用空间.fillMaxWidth().padding(elementPadding)) {Text(text Left Text in Middle Row, modifier Modifier.padding(elementPadding))Button(onClick { /* 处理按钮点击事件 */ },modifier Modifier.padding(elementPadding)) {Text(text Click Me, modifier Modifier.padding(elementPadding))}Text(text Right Text in Middle Row, modifier Modifier.padding(elementPadding))}// 第三个子组件高度同样占总高度的1/3Text(text Bottom Text,modifier Modifier.height(maxHeight / 3).padding(elementPadding))}}}}
}
运行效果 整体布局结构 外层使用 BoxWithConstraints 组件作为基础容器通过 Modifier.fillMaxSize 使其占满整个可用空间以便能获取到最外层的尺寸约束信息maxWidth 和 maxHeight。 获取并利用尺寸约束信息 首先获取了 maxWidth 和 maxHeight并通过一个简单的 Text 组件展示了这两个尺寸值同时利用 Modifier.offset 对其在垂直方向做了一点偏移使其布局更美观。然后依据 maxWidth 和 maxHeight 的大小比较结果选择不同的内部布局方式。 不同布局方式下的子组件处理 水平排列Row 布局情况 当宽度大于高度时使用 Row 组件水平排列子组件通过 horizontalArrangement Arrangement.SpaceEvenly 让子组件在水平方向均匀分布同时利用 Modifier.width 为部分子组件设置特定的宽度占比如设置第一个和第三个 Text 组件宽度为总宽度的 1/3中间的 Column 组件通过 Modifier.weight(1f) 占剩余的宽度空间并且在每个子组件上都添加了 elementPadding 的内边距保证元素之间有合适间距避免堆叠。垂直排列Column 布局情况 类似地当高度大于宽度时采用 Column 组件垂直排列子组件通过 verticalArrangement Arrangement.SpaceEvenly 使子组件在垂直方向均匀分布利用 Modifier.height 设定部分子组件的高度占比如设置第一个和第三个 Text 组件高度为总高度的 1/3中间的 Row 组件通过 Modifier.weight(1f) 占剩余的高度空间同样为每个子组件添加 elementPadding 的内边距确保布局清晰。
