android - 如何在 Jetpack Compose 的 Surface 中显示图像?
问题描述
有没有人有使用 Jetpack Compose 小部件 Surface 将 xml 形状显示为背景的解决方案?
我需要使用 DrawImage,还是有更简单的方法?
在下面的示例中,我想Color.Blue
与一个名为 xml 的文件进行交换,该文件side_nav_bar.xml
实际上是使用创建的渐变<shape> </shape>
@Composable
private fun AppDrawer(
currentScreen: Screen,
closeDrawer: () -> Unit
)
{
val topImage = +imageResource(R.mipmap.empty_1024)
Column(
crossAxisSize = LayoutSize.Expand,
mainAxisSize = LayoutSize.Expand
) {
Surface(color = Color.Blue)
{
Column(
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand)
{
Padding(8.dp) {
Container(expanded = true, height = 100.dp, width = 100.dp){
Clip(shape = RoundedCornerShape(4.dp)) {
DrawImage(image = topImage)
}
}
}
Padding(8.dp){
Text(text = "Fuel Empty")
}
Padding(8.dp){
Text(text = "https://www.fuelpump.no")
}
}
}
Divider()
DrawerButton(
icon = R.drawable.ic_baseline_store_24,
label = "Stations",
isSelected = currentScreen == Screen.Stations
){
navigateTo(Screen.Stations)
closeDrawer()
}
DrawerButton(
icon = R.drawable.ic_baseline_map_24,
label = "Overview",
isSelected = currentScreen == Screen.Overview
){
navigateTo(Screen.Overview)
closeDrawer()
}
DrawerButton(
icon = R.drawable.ic_baseline_format_list_numbered_24,
label = "Statistics",
isSelected = currentScreen == Screen.Statistics
){
navigateTo(Screen.Statistics)
closeDrawer()
}
Divider()
DrawerButton(
icon = R.drawable.ic_baseline_settings_applications_24,
label = "Settings",
isSelected = currentScreen == Screen.Settings
){
closeDrawer()
}
DrawerButton(
icon = R.drawable.ic_baseline_build_24,
label = "Tools",
isSelected = currentScreen == Screen.Tools
){
closeDrawer()
}
DrawerButton(
icon = R.drawable.ic_baseline_help_24,
label = "Help",
isSelected = currentScreen == Screen.Help
){
closeDrawer()
}
}
}
我想用作背景的 xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="135"
android:centerColor="@color/colorPrimaryDark"
android:endColor="@color/ic_black_background"
android:startColor="@color/colorPrimary"
android:type="linear"/>
</shape>
RG
解决方案
试试这个功能。我解决了我的问题。
inline fun Image(
asset: VectorAsset,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Inside,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
推荐阅读
- c++-cli - 将 PInvoke 调用转换为 C++/CLI
- python - 如何将列表理解结果作为解包列表
- mysql - 如何在 MySQL 中管理表所有权
- r - r: select(everything()) 不适用于 broom::augment 建模结果
- optaplanner - Optaplanner:查看中间分数
- javascript - 我可以直接从我的网站启用 javascript 吗?
- javascript - Angular5 和 ngx-bootstrap
- typescript - 如何修复错误“参数'state'和'state'的类型不兼容”
- c++ - 如何对主对角线上方的二维数组中的元素进行排序
- css - 淡出 CSS 中的新行