修改打卡点详情的布局细节参数(边距、字体、尺寸)
This commit is contained in:
3
.idea/deploymentTargetSelector.xml
generated
3
.idea/deploymentTargetSelector.xml
generated
@@ -24,6 +24,9 @@
|
|||||||
</DropdownSelection>
|
</DropdownSelection>
|
||||||
<DialogSelection />
|
<DialogSelection />
|
||||||
</SelectionState>
|
</SelectionState>
|
||||||
|
<SelectionState runConfigName="LocationDetail">
|
||||||
|
<option name="selectionMode" value="DROPDOWN" />
|
||||||
|
</SelectionState>
|
||||||
</selectionStates>
|
</selectionStates>
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
@@ -23,6 +23,7 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
|
|||||||
import androidx.compose.foundation.lazy.staggeredgrid.items
|
import androidx.compose.foundation.lazy.staggeredgrid.items
|
||||||
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
|
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.filled.Favorite
|
import androidx.compose.material.icons.filled.Favorite
|
||||||
import androidx.compose.material.icons.filled.LocationOn
|
import androidx.compose.material.icons.filled.LocationOn
|
||||||
@@ -138,18 +139,32 @@ fun LocationDetail() {
|
|||||||
BottomSheetScaffold(
|
BottomSheetScaffold(
|
||||||
scaffoldState = scaffoldState,
|
scaffoldState = scaffoldState,
|
||||||
sheetPeekHeight = getPeekHeight(),
|
sheetPeekHeight = getPeekHeight(),
|
||||||
sheetContainerColor = Color.White,
|
sheetContainerColor = Color.Transparent,
|
||||||
|
sheetShape = RoundedCornerShape(16.dp),
|
||||||
|
sheetDragHandle = null,
|
||||||
sheetContent = {
|
sheetContent = {
|
||||||
Column(
|
Column(
|
||||||
Modifier
|
Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
|
.background(color = Color.White)
|
||||||
) {
|
) {
|
||||||
Column(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.padding(horizontal = 16.dp)
|
.padding(horizontal = 16.dp)
|
||||||
) {
|
) {
|
||||||
Text("Location Name", fontSize = 24.sp, fontWeight = FontWeight.Bold)
|
Spacer(modifier = Modifier.height(12.dp))
|
||||||
Spacer(modifier = Modifier.height(16.dp))
|
// 自定义短线
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.width(32.dp) // 修改宽度
|
||||||
|
.height(4.dp) // 修改高度
|
||||||
|
.background(Color(0f,0f,0f,0.4f), RoundedCornerShape(3.dp)) // 修改颜色和圆角
|
||||||
|
.padding(top = 12.dp) // 调整位置
|
||||||
|
.align(Alignment.CenterHorizontally)
|
||||||
|
|
||||||
|
)
|
||||||
|
Text("Location Name", modifier = Modifier.padding(top = 24.dp), fontSize = 18.sp, fontWeight = FontWeight.Bold)
|
||||||
|
Spacer(modifier = Modifier.height(8.dp))
|
||||||
FlowRow(
|
FlowRow(
|
||||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||||
@@ -158,40 +173,33 @@ fun LocationDetail() {
|
|||||||
Box(
|
Box(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.background(Color(0xFFF5F5F5))
|
.background(Color(0xFFF5F5F5))
|
||||||
.padding(horizontal = 8.dp, vertical = 4.dp)
|
.padding(horizontal = 7.dp, vertical = 2.dp)
|
||||||
|
|
||||||
|
|
||||||
) {
|
) {
|
||||||
Text("Tag $it", color = Color(0xFFb2b2b2))
|
Text("Tag $it", color = Color(0xFFb2b2b2), fontSize = 12.sp)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
HorizontalDivider(
|
HorizontalDivider(
|
||||||
modifier = Modifier.padding(vertical = 16.dp),
|
modifier = Modifier.padding(top = 16.dp),
|
||||||
color = Color(0xFFF5F5F5)
|
color = Color(0xFFF5F5F5)
|
||||||
)
|
)
|
||||||
Row(
|
Row(
|
||||||
modifier = Modifier.padding(vertical = 16.dp)
|
modifier = Modifier.padding(vertical = 16.dp),
|
||||||
|
verticalAlignment = Alignment.CenterVertically
|
||||||
) {
|
) {
|
||||||
Column {
|
Column {
|
||||||
Text(
|
Text(
|
||||||
"Location name",
|
"Location name",
|
||||||
fontSize = 16.sp,
|
fontSize = 14.sp,
|
||||||
fontWeight = FontWeight.Bold
|
fontWeight = FontWeight.Bold
|
||||||
)
|
)
|
||||||
Spacer(modifier = Modifier.height(8.dp))
|
Spacer(modifier = Modifier.height(8.dp))
|
||||||
Text("距离46KM,骑行时间77分钟")
|
Text("距离46KM,骑行时间77分钟",fontSize = 12.sp)
|
||||||
}
|
}
|
||||||
Spacer(modifier = Modifier.weight(1f))
|
Spacer(modifier = Modifier.weight(1f))
|
||||||
IconButton(
|
Image(painter = painterResource(id = R.drawable.rider_pro_location_map), contentDescription = "")
|
||||||
onClick = { }
|
|
||||||
) {
|
|
||||||
Icon(
|
|
||||||
Icons.Filled.LocationOn,
|
|
||||||
contentDescription = "Location"
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -204,23 +212,25 @@ fun LocationDetail() {
|
|||||||
Column(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.padding(horizontal = 16.dp)
|
.padding(horizontal = 16.dp)
|
||||||
.padding(top = 16.dp)
|
.padding(top = 18.dp)
|
||||||
) {
|
) {
|
||||||
Row {
|
Row {
|
||||||
Text("官方摄影师作品", fontSize = 16.sp, fontWeight = FontWeight.Bold)
|
Text("官方摄影师作品", fontSize = 15.sp, fontWeight = FontWeight.Bold)
|
||||||
Spacer(modifier = Modifier.weight(1f))
|
Spacer(modifier = Modifier.weight(1f))
|
||||||
Image(
|
Image(
|
||||||
painter = painterResource(id = R.drawable.rider_pro_nav_next),
|
painter = painterResource(id = R.drawable.rider_pro_nav_next),
|
||||||
contentDescription = "Next",
|
contentDescription = "Next",
|
||||||
modifier = Modifier.size(24.dp).clickable {
|
modifier = Modifier
|
||||||
navController.navigate("OfficialPhoto")
|
.size(24.dp)
|
||||||
}
|
.clickable {
|
||||||
|
navController.navigate("OfficialPhoto")
|
||||||
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Spacer(modifier = Modifier.height(16.dp))
|
Spacer(modifier = Modifier.height(17.dp))
|
||||||
Row(
|
Row(
|
||||||
modifier = Modifier.height(240.dp)
|
modifier = Modifier.height(232.dp)
|
||||||
) {
|
) {
|
||||||
Box(
|
Box(
|
||||||
modifier = Modifier.weight(1f)
|
modifier = Modifier.weight(1f)
|
||||||
@@ -228,9 +238,10 @@ fun LocationDetail() {
|
|||||||
Image(
|
Image(
|
||||||
painter = painterResource(id = R.drawable.default_avatar),
|
painter = painterResource(id = R.drawable.default_avatar),
|
||||||
contentDescription = "Avatar",
|
contentDescription = "Avatar",
|
||||||
modifier = Modifier.fillMaxSize()
|
modifier = Modifier
|
||||||
.clip(MaterialTheme.shapes.medium),
|
.fillMaxSize()
|
||||||
contentScale = ContentScale.Crop
|
.clip(RoundedCornerShape(16.dp)),
|
||||||
|
contentScale = ContentScale.Crop,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Spacer(modifier = Modifier.width(16.dp))
|
Spacer(modifier = Modifier.width(16.dp))
|
||||||
@@ -242,7 +253,7 @@ fun LocationDetail() {
|
|||||||
contentDescription = "Avatar",
|
contentDescription = "Avatar",
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxSize()
|
.fillMaxSize()
|
||||||
.clip(MaterialTheme.shapes.medium),
|
.clip(RoundedCornerShape(16.dp)),
|
||||||
contentScale = ContentScale.Crop
|
contentScale = ContentScale.Crop
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -279,13 +290,16 @@ fun LocationDetail() {
|
|||||||
Image(
|
Image(
|
||||||
painter = painterResource(id = item.resId),
|
painter = painterResource(id = item.resId),
|
||||||
contentDescription = "Feed",
|
contentDescription = "Feed",
|
||||||
modifier = Modifier.fillMaxWidth()
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
.clip(MaterialTheme.shapes.medium),
|
.clip(MaterialTheme.shapes.medium),
|
||||||
contentScale = ContentScale.FillWidth
|
contentScale = ContentScale.FillWidth
|
||||||
)
|
)
|
||||||
Spacer(modifier = Modifier.height(8.dp))
|
Spacer(modifier = Modifier.height(8.dp))
|
||||||
Column(
|
Column(
|
||||||
modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp)
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.padding(horizontal = 8.dp)
|
||||||
) {
|
) {
|
||||||
Box(
|
Box(
|
||||||
modifier = Modifier.fillMaxWidth()
|
modifier = Modifier.fillMaxWidth()
|
||||||
@@ -300,7 +314,8 @@ fun LocationDetail() {
|
|||||||
Image(
|
Image(
|
||||||
painter = painterResource(id = R.drawable.default_avatar),
|
painter = painterResource(id = R.drawable.default_avatar),
|
||||||
contentDescription = "Avatar",
|
contentDescription = "Avatar",
|
||||||
modifier = Modifier.size(18.dp)
|
modifier = Modifier
|
||||||
|
.size(18.dp)
|
||||||
.clip(CircleShape),
|
.clip(CircleShape),
|
||||||
contentScale = ContentScale.Crop
|
contentScale = ContentScale.Crop
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ fun Navigation() {
|
|||||||
}
|
}
|
||||||
) { it
|
) { it
|
||||||
Box(
|
Box(
|
||||||
modifier = Modifier.padding(it.calculateTopPadding())
|
modifier = Modifier.padding(it)
|
||||||
) {
|
) {
|
||||||
NavigationController(navController = navController)
|
NavigationController(navController = navController)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ fun OfficialGalleryPage() {
|
|||||||
Column(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxSize()
|
.fillMaxSize()
|
||||||
.padding(16.dp)
|
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
|
||||||
) {
|
) {
|
||||||
OfficialGalleryPageHeader()
|
OfficialGalleryPageHeader()
|
||||||
// CertificationSection()
|
// CertificationSection()
|
||||||
|
|||||||
89
app/src/main/res/drawable/rider_pro_location_map.xml
Normal file
89
app/src/main/res/drawable/rider_pro_location_map.xml
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
xmlns:aapt="http://schemas.android.com/aapt"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:pathData="M12,0L12,0A12,12 0,0 1,24 12L24,12A12,12 0,0 1,12 24L12,24A12,12 0,0 1,0 12L0,12A12,12 0,0 1,12 0z"
|
||||||
|
android:strokeWidth="1"
|
||||||
|
android:fillColor="#D0E2F1"
|
||||||
|
android:fillType="evenOdd"
|
||||||
|
android:strokeColor="#00000000"/>
|
||||||
|
<group>
|
||||||
|
<clip-path
|
||||||
|
android:pathData="M12,0L12,0A12,12 0,0 1,24 12L24,12A12,12 0,0 1,12 24L12,24A12,12 0,0 1,0 12L0,12A12,12 0,0 1,12 0z"/>
|
||||||
|
<path
|
||||||
|
android:pathData="M2,3L13,8"
|
||||||
|
android:strokeWidth="1.5"
|
||||||
|
android:fillColor="#00000000"
|
||||||
|
android:fillType="evenOdd"
|
||||||
|
android:strokeLineCap="round">
|
||||||
|
<aapt:attr name="android:strokeColor">
|
||||||
|
<gradient
|
||||||
|
android:startX="13"
|
||||||
|
android:startY="6.017"
|
||||||
|
android:endX="3.069"
|
||||||
|
android:endY="4.983"
|
||||||
|
android:type="linear">
|
||||||
|
<item android:offset="0" android:color="#FFFFFFFF"/>
|
||||||
|
<item android:offset="1" android:color="#66FFFFFF"/>
|
||||||
|
</gradient>
|
||||||
|
</aapt:attr>
|
||||||
|
</path>
|
||||||
|
</group>
|
||||||
|
<group>
|
||||||
|
<clip-path
|
||||||
|
android:pathData="M12,0L12,0A12,12 0,0 1,24 12L24,12A12,12 0,0 1,12 24L12,24A12,12 0,0 1,0 12L0,12A12,12 0,0 1,12 0z"/>
|
||||||
|
<path
|
||||||
|
android:pathData="M13,16L24,21"
|
||||||
|
android:strokeWidth="1.5"
|
||||||
|
android:fillColor="#00000000"
|
||||||
|
android:fillType="evenOdd"
|
||||||
|
android:strokeLineCap="round">
|
||||||
|
<aapt:attr name="android:strokeColor">
|
||||||
|
<gradient
|
||||||
|
android:startX="13"
|
||||||
|
android:startY="17.983"
|
||||||
|
android:endX="24"
|
||||||
|
android:endY="19.017"
|
||||||
|
android:type="linear">
|
||||||
|
<item android:offset="0" android:color="#26FFFFFF"/>
|
||||||
|
<item android:offset="1" android:color="#FFFFFFFF"/>
|
||||||
|
</gradient>
|
||||||
|
</aapt:attr>
|
||||||
|
</path>
|
||||||
|
</group>
|
||||||
|
<group>
|
||||||
|
<clip-path
|
||||||
|
android:pathData="M12,0L12,0A12,12 0,0 1,24 12L24,12A12,12 0,0 1,12 24L12,24A12,12 0,0 1,0 12L0,12A12,12 0,0 1,12 0z"/>
|
||||||
|
<path
|
||||||
|
android:pathData="M18,2L7,23"
|
||||||
|
android:strokeWidth="1.5"
|
||||||
|
android:fillColor="#00000000"
|
||||||
|
android:fillType="evenOdd"
|
||||||
|
android:strokeLineCap="round">
|
||||||
|
<aapt:attr name="android:strokeColor">
|
||||||
|
<gradient
|
||||||
|
android:startX="12.5"
|
||||||
|
android:startY="2"
|
||||||
|
android:endX="12.5"
|
||||||
|
android:endY="23"
|
||||||
|
android:type="linear">
|
||||||
|
<item android:offset="0" android:color="#FFFFFFFF"/>
|
||||||
|
<item android:offset="1" android:color="#42FFFFFF"/>
|
||||||
|
</gradient>
|
||||||
|
</aapt:attr>
|
||||||
|
</path>
|
||||||
|
</group>
|
||||||
|
<group>
|
||||||
|
<clip-path
|
||||||
|
android:pathData="M12,0L12,0A12,12 0,0 1,24 12L24,12A12,12 0,0 1,12 24L12,24A12,12 0,0 1,0 12L0,12A12,12 0,0 1,12 0z"/>
|
||||||
|
<path
|
||||||
|
android:pathData="M12,7C14.209,7 16,8.832 16,11.091C16,14.273 12,17 12,17C12,17 8,14.273 8,11.091C8,8.832 9.791,7 12,7ZM12,9.222C11.053,9.222 10.286,9.968 10.286,10.889C10.286,11.809 11.053,12.556 12,12.556C12.947,12.556 13.714,11.809 13.714,10.889C13.714,9.968 12.947,9.222 12,9.222Z"
|
||||||
|
android:strokeWidth="1"
|
||||||
|
android:fillColor="#000000"
|
||||||
|
android:fillType="evenOdd"
|
||||||
|
android:strokeColor="#00000000"/>
|
||||||
|
</group>
|
||||||
|
</vector>
|
||||||
Reference in New Issue
Block a user