รูปแบบเลย์เอาต์ของการเขียนช่วยให้คุณใช้ AlignmentLine
เพื่อสร้างแบบกำหนดเองได้
จัดตำแหน่งเส้นที่เลย์เอาต์ระดับบนสุดสามารถใช้เพื่อจัดตำแหน่งและวาง
ตัวอย่างเช่น
Row
สามารถใช้บรรทัดการจัดข้อความที่กำหนดเองของบุตรหลานเพื่อจัดแนวข้อความ
เมื่อเลย์เอาต์มีค่าสำหรับ AlignmentLine
ที่เจาะจง องค์ประกอบ
ผู้ปกครองจะอ่านค่านี้ได้หลังจากวัดผล โดยใช้ Placeable.get
โอเปอเรเตอร์
อินสแตนซ์ Placeable
ผู้ปกครองจะทำสิ่งต่อไปนี้ได้โดยอิงตามตำแหน่งของAlignmentLine
แล้วก็ตัดสินตำแหน่งของเด็กๆ
Composable บางรายการใน Compose จะมีบรรทัดการจัดข้อความอยู่แล้ว ตัวอย่างเช่น พารามิเตอร์
BasicText
Composable จะแสดงเส้นการจัดแนว FirstBaseline
และ LastBaseline
ในตัวอย่างด้านล่าง LayoutModifier
ที่กำหนดเองชื่อว่า
firstBaselineToTop
อ่านเครื่องหมาย FirstBaseline
เพื่อเพิ่มระยะห่างจากขอบใน Text
โดยเริ่มต้นจากเกณฑ์พื้นฐานแรก
รูปที่ 1 แสดงความแตกต่างระหว่างการเพิ่มระยะห่างจากขอบปกติลงในองค์ประกอบ และการใส่ระยะห่างจากขอบกับเส้นฐานขององค์ประกอบข้อความ
fun Modifier.firstBaselineToTop( firstBaselineToTop: Dp, ) = layout { measurable, constraints -> // Measure the composable val placeable = measurable.measure(constraints) // Check the composable has a first baseline check(placeable[FirstBaseline] != AlignmentLine.Unspecified) val firstBaseline = placeable[FirstBaseline] // Height of the composable with padding - first baseline val placeableY = firstBaselineToTop.roundToPx() - firstBaseline val height = placeable.height + placeableY layout(placeable.width, height) { // Where the composable gets placed placeable.placeRelative(0, placeableY) } } @Preview @Composable private fun TextWithPaddingToBaseline() { MaterialTheme { Text("Hi there!", Modifier.firstBaselineToTop(32.dp)) } }
หากต้องการอ่าน FirstBaseline
ในตัวอย่าง
ระบบจะใช้ placeable [FirstBaseline]
ในช่วงการวัด
สร้างเส้นจัดข้อความที่กำหนดเอง
เมื่อสร้างLayout
ที่กำหนดเอง
Composable หรือ LayoutModifier
ที่กำหนดเอง คุณสามารถระบุ
บรรทัดการจัดข้อความที่กำหนดเองเพื่อให้ Composable หลักอื่นๆ สามารถใช้ในการจัดแนว
และวางตำแหน่งลูกๆ ให้สอดคล้องกัน
ตัวอย่างต่อไปนี้แสดง BarChart
Composable ที่กำหนดเองที่แสดง
จัดบรรทัด MaxChartValue
และ MinChartValue
เพื่อให้ Composable อื่นๆ
สามารถปรับให้สอดคล้องกับค่าสูงสุดและต่ำสุดของแผนภูมิ 2 ข้อความ
องค์ประกอบสูงสุดและต่ำสุดอยู่กึ่งกลางของ
จัดบรรทัดใหม่
รูปที่ 2 BarChart
เขียนได้ด้วย "ข้อความ" ที่จัดชิดขอบค่าสูงสุดและ
ค่าข้อมูลขั้นต่ำ
เส้นการจัดข้อความที่กำหนดเองจะได้รับการกำหนดเป็นตัวแปรระดับบนสุดในโปรเจ็กต์ของคุณ
/** * AlignmentLine defined by the maximum data value in a [BarChart] */ private val MaxChartValue = HorizontalAlignmentLine(merger = { old, new -> min(old, new) }) /** * AlignmentLine defined by the minimum data value in a [BarChart] */ private val MinChartValue = HorizontalAlignmentLine(merger = { old, new -> max(old, new) })
เส้นจัดข้อความที่กำหนดเองสำหรับสร้างตัวอย่างของเราเป็นประเภท
HorizontalAlignmentLine
เป็น
ใช้เพื่อจัดตำแหน่งเด็กในแนวตั้ง นโยบายการผสานถูกส่งผ่าน
ในกรณีที่เลย์เอาต์หลายรายการมีค่าสำหรับการจัดแนวเส้นเหล่านี้ อาส
พิกัดของระบบเขียนและCanvas
พิกัดแสดงถึง [0, 0]
มุมซ้ายบนและแกน x
และแกน y
ปรับลง ดังนั้นค่า MaxChartValue
จะน้อยกว่าเสมอ
MinChartValue
ดังนั้น นโยบายการควบรวมจึงเป็น min
สำหรับแผนภูมิสูงสุด
เกณฑ์พื้นฐานสำหรับค่าข้อมูล และ max
สำหรับเกณฑ์พื้นฐานค่าข้อมูลในแผนภูมิขั้นต่ำ
เมื่อสร้าง Layout
หรือ LayoutModifier
ที่กำหนดเอง ให้ระบุการจัดข้อความที่กำหนดเอง
สายใน MeasureScope.layout
ซึ่งจะใช้ alignmentLines: Map<AlignmentLine, Int>
พารามิเตอร์
@Composable private fun BarChart( dataPoints: List<Int>, modifier: Modifier = Modifier, ) { val maxValue: Float = remember(dataPoints) { dataPoints.maxOrNull()!! * 1.2f } BoxWithConstraints(modifier = modifier) { val density = LocalDensity.current with(density) { // ... // Calculate baselines val maxYBaseline = // ... val minYBaseline = // ... Layout( content = {}, modifier = Modifier.drawBehind { // ... } ) { _, constraints -> with(constraints) { layout( width = if (hasBoundedWidth) maxWidth else minWidth, height = if (hasBoundedHeight) maxHeight else minHeight, // Custom AlignmentLines are set here. These are propagated // to direct and indirect parent composables. alignmentLines = mapOf( MinChartValue to minYBaseline.roundToInt(), MaxChartValue to maxYBaseline.roundToInt() ) ) {} } } } } }
ผู้เผยแพร่โฆษณาโดยตรงและโดยอ้อมของ Composable นี้สามารถใช้การจัดเรียงที่สอดคล้องกัน
เส้น Composable ต่อไปนี้จะสร้างรูปแบบที่กำหนดเองที่ใช้เป็น
พารามิเตอร์ 2 Text
ช่องและจุดข้อมูล และจัดข้อความทั้ง 2 รายการให้อยู่ในแนวเดียวกับ
ค่าสูงสุดและต่ำสุดของข้อมูลแผนภูมิ ตัวอย่างของ Composable นี้คือ
สิ่งที่แสดงในรูปที่ 2
@Composable private fun BarChartMinMax( dataPoints: List<Int>, maxText: @Composable () -> Unit, minText: @Composable () -> Unit, modifier: Modifier = Modifier, ) { Layout( content = { maxText() minText() // Set a fixed size to make the example easier to follow BarChart(dataPoints, Modifier.size(200.dp)) }, modifier = modifier ) { measurables, constraints -> check(measurables.size == 3) val placeables = measurables.map { it.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val maxTextPlaceable = placeables[0] val minTextPlaceable = placeables[1] val barChartPlaceable = placeables[2] // Obtain the alignment lines from BarChart to position the Text val minValueBaseline = barChartPlaceable[MinChartValue] val maxValueBaseline = barChartPlaceable[MaxChartValue] layout(constraints.maxWidth, constraints.maxHeight) { maxTextPlaceable.placeRelative( x = 0, y = maxValueBaseline - (maxTextPlaceable.height / 2) ) minTextPlaceable.placeRelative( x = 0, y = minValueBaseline - (minTextPlaceable.height / 2) ) barChartPlaceable.placeRelative( x = max(maxTextPlaceable.width, minTextPlaceable.width) + 20, y = 0 ) } } } @Preview @Composable private fun ChartDataPreview() { MaterialTheme { BarChartMinMax( dataPoints = listOf(4, 24, 15), maxText = { Text("Max") }, minText = { Text("Min") }, modifier = Modifier.padding(24.dp) ) } }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- กราฟิกในการเขียน
- เลย์เอาต์ที่กำหนดเอง {:#custom-layouts }
- การวัดภายในในเลย์เอาต์ของการเขียน