如何在 Jetpack Compose 中实现跨多个设备的一致设计
问题描述 投票：0回答：1
我正在做一个 Jetpack Compose 项目，并试图在 Sketch 应用程序设计的基础上实现像素完美的设计。但是，当我在两个不同的设备（Pixel 6 Pro 和 Infix Mobility 设备）上运行该应用程序时，输出看起来完全不同。在 Infix 设备上，存在按钮在另一个布局上溢出的问题。
这是我的代码
Column(
modifier = Modifier
.fillMaxSize()
.background(Blue)
) {
ConstraintLayout(
modifier = Modifier
.fillMaxSize()
.weight(1f)
.padding(30.dp)
) {
val (backImg, headerTextId, subHeaderTextId, profileImageId, txtAddProfilePicId, firstNameId, lastNameId, phoneNumberId, nextBtnId) = createRefs()
Image(painter = painterResource(id = R.drawable.img_back),
contentDescription = "Back",
modifier = Modifier
.clickable {}
.constrainAs(backImg) {
top.linkTo(parent.top)
start.linkTo(parent.start)
})
Column(modifier = Modifier.constrainAs(headerTextId) {
top.linkTo(backImg.bottom, margin = 10.dp)
start.linkTo(parent.start)
}) {
CommonHeaderText(
text = stringResource(id = R.string.complete_profile), textSize = 26.sp
)
}
Column(modifier = Modifier.constrainAs(subHeaderTextId) {
top.linkTo(headerTextId.bottom)
start.linkTo(parent.start)
}) {
CommonSubHeaderText(stringResource(id = R.string.complete_profile_desc))
}
AsyncImage(model = ImageRequest.Builder(LocalContext.current).data(
R.drawable.camera_round
).crossfade(true).build(),
contentDescription = "Profile Image",
placeholder = painterResource(id = R.drawable.camera_round),
modifier = Modifier
.constrainAs(profileImageId) {
top.linkTo(subHeaderTextId.bottom, margin = 15.dp)
start.linkTo(parent.start)
}
.clip(CircleShape)
.size(100.dp)
.clickable {},
contentScale = ContentScale.Crop
)
Text(
stringResource(id = R.string.add_profile_pic),
modifier = Modifier
.padding(vertical = 5.dp)
.constrainAs(txtAddProfilePicId) {
top.linkTo(profileImageId.top)
bottom.linkTo(profileImageId.bottom)
start.linkTo(profileImageId.end, margin = 15.dp)
},
fontSize = 16.sp,
color = Color.White,
fontFamily = avenirFamily,
fontWeight = FontWeight.Bold
)
OutlinedTextField(keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
),
shape = RoundedCornerShape(7.dp),
isError = false,
value = "",
onValueChange = {},
placeholder = {
EditTextPlaceHolder(
stringResource(id = R.string.first_name), TextGreenColor
)
},
modifier = Modifier
.constrainAs(firstNameId) {
top.linkTo(profileImageId.bottom, margin = 30.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.fillMaxWidth()
.clip(shape = RoundedCornerShape(7.dp)),
colors = TextFieldDefaults.textFieldColors(
errorIndicatorColor = Red,
backgroundColor = Color.White,
cursorColor = ScreenBackgroundColor,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedLabelColor = Color.Transparent
),
singleLine = true,
textStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.7f),
fontFamily = avenirFamily,
fontWeight = FontWeight.Medium
))
OutlinedTextField(keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
),
isError = false,
shape = RoundedCornerShape(7.dp),
value = "",
onValueChange = {},
placeholder = {
EditTextPlaceHolder(stringResource(id = R.string.last_name), TextGreenColor)
},
modifier = Modifier
.constrainAs(lastNameId) {
top.linkTo(firstNameId.bottom, margin = 20.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.fillMaxWidth()
.clip(shape = RoundedCornerShape(7.dp)),
colors = TextFieldDefaults.textFieldColors(
errorIndicatorColor = Red,
backgroundColor = Color.White,
cursorColor = ScreenBackgroundColor,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedLabelColor = Color.Transparent
),
singleLine = true,
textStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.7f),
fontFamily = avenirFamily,
fontWeight = FontWeight.Medium
))
Column(modifier = Modifier
.constrainAs(phoneNumberId) {
top.linkTo(lastNameId.bottom, margin = 20.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.clip(shape = RoundedCornerShape(7.dp))
.background(Color.White)) {
MaterialCountryCodePicker(
pickedCountry = {
},
showErrorText = false,
showCountryCodeInDIalog = true,
showDropDownAfterFlag = false,
textFieldShapeCornerRadiusInPercentage = 10,
searchFieldShapeCornerRadiusInPercentage = 20,
countryItemBgShape = RoundedCornerShape(12.dp),
focusedBorderColor = Color.Transparent,
unfocusedBorderColor = Color.Transparent,
cursorColor = ScreenBackgroundColor,
showCountryFlag = false,
showCountryCode = true,
countrytextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
countrycodetextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
phonenumbertextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
phonehintnumbertextstyle = TextStyle(
fontSize = 16.sp,
color = TextGreenColor,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
searchFieldTextStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
dialogcountrycodetextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
searchFieldPlaceHolderTextStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.5f),
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
appbartitleStyle = TextStyle(
fontSize = 18.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.SemiBold
),
defaultCountry = CountryData("+91"),
onValueChange = {
},
text = ""
)
}
}
Column(
modifier = Modifier
.fillMaxSize()
.weight(0.35f)
.padding(horizontal = 40.dp)
) {
CommonShadowButton(
text = stringResource(id = R.string.next), backgroundColor = Color.White
) {
}
}
}
谁能帮我理解为什么输出在不同设备上不同，以及如何在 Jetpack Compose 中实现跨多个设备的一致设计？”
编辑1：
我使用重量是因为我有一个按钮，它会被放置在每个屏幕上的固定位置。如果我直接使用它，那么按钮将不会放在每个屏幕的同一个地方，这就是我使用重量的原因。 让我分享一下我想要的不同屏幕的输出
这就是为什么我使用列权重并将此功能放在每个屏幕上的原因。
Column(
modifier = Modifier
.fillMaxSize()
.weight(0.35f)
.padding(horizontal = 40.dp)
) {
CommonShadowButton(
text = stringResource(id = R.string.next), backgroundColor = Color.White
) {
}
}
1个回答
2
投票
投票
粘贴下面的代码并尝试它..实际上我在这里做了什么，删除了重量属性并在列属性之间添加了空间。
Box(
modifier = Modifier
.fillMaxSize()
.background(Blue)
) {
ConstraintLayout(
modifier = Modifier
.padding(30.dp)
) {
val (backImg, headerTextId, subHeaderTextId, profileImageId, txtAddProfilePicId, firstNameId, lastNameId, phoneNumberId, nextBtnId) = createRefs()
Image(painter = painterResource(id = R.drawable.img_back),
contentDescription = "Back",
modifier = Modifier
.clickable {}
.constrainAs(backImg) {
top.linkTo(parent.top)
start.linkTo(parent.start)
})
Column(modifier = Modifier.constrainAs(headerTextId) {
top.linkTo(backImg.bottom, margin = 10.dp)
start.linkTo(parent.start)
}) {
CommonHeaderText(
text = stringResource(id = R.string.complete_profile), textSize = 26.sp
)
}
Column(modifier = Modifier.constrainAs(subHeaderTextId) {
top.linkTo(headerTextId.bottom)
start.linkTo(parent.start)
}) {
CommonSubHeaderText(stringResource(id = R.string.complete_profile_desc))
}
AsyncImage(model = ImageRequest.Builder(LocalContext.current).data(
R.drawable.camera_round
).crossfade(true).build(),
contentDescription = "Profile Image",
placeholder = painterResource(id = R.drawable.camera_round),
modifier = Modifier
.constrainAs(profileImageId) {
top.linkTo(subHeaderTextId.bottom, margin = 15.dp)
start.linkTo(parent.start)
}
.clip(CircleShape)
.size(100.dp)
.clickable {},
contentScale = ContentScale.Crop
)
Text(
stringResource(id = R.string.add_profile_pic),
modifier = Modifier
.padding(vertical = 5.dp)
.constrainAs(txtAddProfilePicId) {
top.linkTo(profileImageId.top)
bottom.linkTo(profileImageId.bottom)
start.linkTo(profileImageId.end, margin = 15.dp)
},
fontSize = 16.sp,
color = Color.White,
fontFamily = avenirFamily,
fontWeight = FontWeight.Bold
)
OutlinedTextField(keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
),
shape = RoundedCornerShape(7.dp),
isError = false,
value = "",
onValueChange = {},
placeholder = {
EditTextPlaceHolder(
stringResource(id = R.string.first_name), TextGreenColor
)
},
modifier = Modifier
.constrainAs(firstNameId) {
top.linkTo(profileImageId.bottom, margin = 30.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.fillMaxWidth()
.clip(shape = RoundedCornerShape(7.dp)),
colors = TextFieldDefaults.textFieldColors(
errorIndicatorColor = Red,
backgroundColor = Color.White,
cursorColor = ScreenBackgroundColor,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedLabelColor = Color.Transparent
),
singleLine = true,
textStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.7f),
fontFamily = avenirFamily,
fontWeight = FontWeight.Medium
))
OutlinedTextField(keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
),
isError = false,
shape = RoundedCornerShape(7.dp),
value = "",
onValueChange = {},
placeholder = {
EditTextPlaceHolder(stringResource(id = R.string.last_name), TextGreenColor)
},
modifier = Modifier
.constrainAs(lastNameId) {
top.linkTo(firstNameId.bottom, margin = 20.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.fillMaxWidth()
.clip(shape = RoundedCornerShape(7.dp)),
colors = TextFieldDefaults.textFieldColors(
errorIndicatorColor = Red,
backgroundColor = Color.White,
cursorColor = ScreenBackgroundColor,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedLabelColor = Color.Transparent
),
singleLine = true,
textStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.7f),
fontFamily = avenirFamily,
fontWeight = FontWeight.Medium
))
Column(modifier = Modifier
.constrainAs(phoneNumberId) {
top.linkTo(lastNameId.bottom, margin = 20.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.clip(shape = RoundedCornerShape(7.dp))
.background(Color.White)) {
MaterialCountryCodePicker(
pickedCountry = {
},
showErrorText = false,
showCountryCodeInDIalog = true,
showDropDownAfterFlag = false,
textFieldShapeCornerRadiusInPercentage = 10,
searchFieldShapeCornerRadiusInPercentage = 20,
countryItemBgShape = RoundedCornerShape(12.dp),
focusedBorderColor = Color.Transparent,
unfocusedBorderColor = Color.Transparent,
cursorColor = ScreenBackgroundColor,
showCountryFlag = false,
showCountryCode = true,
countrytextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
countrycodetextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
phonenumbertextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
phonehintnumbertextstyle = TextStyle(
fontSize = 16.sp,
color = TextGreenColor,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
searchFieldTextStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
dialogcountrycodetextstyle = TextStyle(
fontSize = 16.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
searchFieldPlaceHolderTextStyle = TextStyle(
fontSize = 16.sp,
color = Color.Black.copy(alpha = 0.5f),
fontFamily = poppinsFamily,
fontWeight = FontWeight.Medium
),
appbartitleStyle = TextStyle(
fontSize = 18.sp,
color = Color.Black,
fontFamily = poppinsFamily,
fontWeight = FontWeight.SemiBold
),
defaultCountry = CountryData("+91"),
onValueChange = {
},
text = ""
)
}
}
Column(
modifier = Modifier
.fillMaxWidth()
.padding(20)
.align(Alignment.BottomCenter)
) {
CommonShadowButton(
text = stringResource(id = R.string.next), backgroundColor = Color.White
) {
}
}
}
注：-。您必须提高代码质量。如果事情是重复的，那么当你的布局不复杂时，也可以使用列、行和框。约束布局用于复杂布局。
最新问题
- 有 connect.static 的事件吗？
- 对 2D 比赛数组进行排序，使每支球队的主客场比赛数量相等
- 如何在 Node.js 中为我的视图之一排除或指定备用layout.mustache？
- 如何在 Node.js 中为我的视图之一排除或指定备用layout.mustache？
- 赛普拉斯测试因单独测试定义中的重复步骤名称而失败 - 错误的步骤运行
- 外部带有 ggplot2 / ggrepel 长标签的饼图
- FirebaseMessaging.instance.getInitialMessage() 返回 null
- 向连接资产添加变量
- 计算一个数字是否为阿姆斯特朗数时得到错误的输出
- Node.js mongojs mongoDB 互联网层
- 如何在 C# 中为包含不同表的删除和更新插入的 List<SqlCommand> 实现 BatchExecute？
- 使用 Windows 身份验证连接到 SQL Server
- Tailwind Headless UI Transition 在 y 轴上不起作用
- Excel VBA：加速设置列宽和视图设置的宏
- connect.multipart() 将在流星启动时在 connect 3.0 中被删除
- pyrebase4 图像文件未下载
- 如何在 Granafa 中通过计算 2 个数字列来创建新列
- glibc - #define void
- 如何在ubuntu中设置新安装程序的路径？
- “git update-git-for-windows”错误：吊销功能无法检查证书吊销
© www.soinside.com 2019 - 2024. All rights reserved.