ข้อจำกัดและลำดับตัวแก้ไข

ใน Compose คุณสามารถเชื่อมโยงตัวแก้ไขหลายตัวเข้าด้วยกันเพื่อเปลี่ยนรูปลักษณ์ของ Composable ได้ เชนตัวปรับแต่งเหล่านี้อาจส่งผลต่อข้อจำกัดที่ส่ง ไปยัง Composable ซึ่งกำหนดขอบเขตความกว้างและความสูง

หน้านี้อธิบายว่าตัวปรับแต่งที่เชื่อมโยงส่งผลต่อข้อจํากัดอย่างไร และส่งผลต่อการวัดและการจัดวาง Composable อย่างไร

ตัวปรับแต่งในทรี UI

หากต้องการทำความเข้าใจว่าตัวปรับแต่งมีอิทธิพลต่อกันอย่างไร คุณควรเห็นภาพว่าตัวปรับแต่งปรากฏในโครงสร้าง UI อย่างไร ซึ่งจะสร้างขึ้นในระหว่างเฟสการคอมโพส ดูข้อมูลเพิ่มเติมได้ที่ส่วนองค์ประกอบ

ในโครงสร้าง UI คุณสามารถแสดงภาพตัวแก้ไขเป็นโหนด Wrapper สำหรับโหนดเลย์เอาต์ได้โดยทำดังนี้

การเพิ่มตัวปรับแต่งมากกว่า 1 รายการลงใน Composable จะสร้างเชนของตัวปรับแต่ง เมื่อ คุณต่อตัวแก้ไขหลายตัวเข้าด้วยกัน โหนดตัวแก้ไขแต่ละตัวจะครอบคลุมส่วนที่เหลือของเชน และโหนดเลย์เอาต์ภายใน เช่น เมื่อเชื่อมโยงตัวแก้ไข clip และ size เข้าด้วยกัน โหนดตัวแก้ไข clip จะครอบโหนดตัวแก้ไข size ซึ่งจะครอบโหนดเลย์เอาต์ Image อีกที

ในระยะเลย์เอาต์ อัลกอริทึมที่เดินผ่านโครงสร้างจะยังคงเหมือนเดิม แต่ ระบบจะเข้าชมโหนดตัวแก้ไขแต่ละรายการด้วย ด้วยวิธีนี้ ตัวแก้ไขจะเปลี่ยนข้อกำหนดด้านขนาด และตำแหน่งของตัวแก้ไขหรือโหนดเลย์เอาต์ที่ตัวแก้ไขครอบคลุมได้

ดังที่แสดงในรูปที่ 2 การใช้งาน Composable Image และ Text ประกอบด้วยเชนของตัวแก้ไขที่ครอบโหนดเลย์เอาต์เดียว

การใช้งาน Row และ Column คือโหนดเลย์เอาต์ที่อธิบายวิธี จัดวางองค์ประกอบย่อย

โดยสรุป

• ตัวปรับแต่งจะครอบโหนดตัวปรับแต่งหรือเลย์เอาต์เดียว
• โหนดเลย์เอาต์สามารถจัดวางโหนดลูกหลายโหนดได้

ส่วนต่อไปนี้จะอธิบายวิธีใช้โมเดลความคิดนี้เพื่อหาเหตุผลเกี่ยวกับการเชื่อมโยงตัวปรับแต่งและวิธีที่ส่งผลต่อขนาดของ Composable

ข้อจำกัดในระยะเลย์เอาต์

ระยะเลย์เอาต์ใช้อัลกอริทึม 3 ขั้นตอนเพื่อค้นหาความกว้าง ความสูง และพิกัด x, y ของโหนดเลย์เอาต์แต่ละรายการ

1. วัดขนาดขององค์ประกอบย่อย: โหนดจะวัดขนาดขององค์ประกอบย่อย (หากมี)
2. กำหนดขนาดเอง: โหนดจะกำหนดขนาดของตัวเองตามการวัดเหล่านั้น
3. วางองค์ประกอบย่อย: โหนดย่อยแต่ละโหนดจะวางไว้เทียบกับตำแหน่งของโหนดเอง

Constraints ช่วยค้นหาขนาดที่เหมาะสมสำหรับโหนดใน 2 ขั้นตอนแรก ของอัลกอริทึม ข้อจำกัดจะกำหนดขอบเขตต่ำสุดและสูงสุดสำหรับความกว้างและความสูงของโหนด เมื่อโหนดตัดสินใจเกี่ยวกับขนาดของตัวเอง ขนาดที่วัดได้ ควรอยู่ในช่วงขนาดนี้

ประเภทของข้อจำกัด

ข้อจำกัดอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้

• มีขอบเขต: โหนดมีความกว้างและความสูงสูงสุดและต่ำสุด

• ไม่จำกัด: โหนดไม่มีข้อจำกัดด้านขนาด ระบบจะตั้งค่าขอบเขตความกว้างและความสูงสูงสุดเป็นอนันต์

• แน่นอน: ระบบจะขอให้โหนดปฏิบัติตามข้อกำหนดด้านขนาดที่แน่นอน ขอบเขตต่ำสุด และสูงสุดจะตั้งเป็นค่าเดียวกัน

• การรวม: โหนดเป็นไปตามข้อจำกัดประเภทต่างๆ ที่กล่าวถึงก่อนหน้า เช่น ข้อจำกัดอาจกำหนดขอบเขตความกว้างในขณะที่อนุญาตให้มีความสูงสูงสุดแบบไม่จำกัด หรือกำหนดความกว้างที่แน่นอนแต่กำหนดขอบเขตความสูง

ส่วนถัดไปจะอธิบายวิธีส่งข้อจำกัดเหล่านี้จากองค์ประกอบหลักไปยังองค์ประกอบย่อย

วิธีส่งข้อจำกัดจากองค์กรระดับบนสุดไปยังองค์กรย่อย

ในขั้นตอนแรกของอัลกอริทึมที่อธิบายไว้ในข้อจำกัดในระยะเลย์เอาต์ ข้อจำกัดจะส่งต่อจากองค์ประกอบหลักไปยังองค์ประกอบย่อย ในโครงสร้าง UI

เมื่อโหนดหลักวัดขนาดของโหนดย่อย โหนดหลักจะระบุข้อจำกัดเหล่านี้ให้กับโหนดย่อยแต่ละรายการเพื่อให้ทราบว่าโหนดย่อยมีขนาดได้ใหญ่หรือเล็กเพียงใด จากนั้นเมื่อ กำหนดขนาดของตัวเอง ก็จะยึดตามข้อจำกัดที่ส่งมาจาก องค์ประกอบระดับบนสุดของตัวเองด้วย

ในระดับสูง อัลกอริทึมจะทำงานดังนี้

1. เพื่อกำหนดขนาดที่ต้องการใช้จริง โหนดรูทในแผนผัง UI จะวัดขนาดของโหนดลูกและส่งต่อข้อจำกัดเดียวกันไปยังโหนดลูกตัวแรก
2. หากเป็นตัวแก้ไขที่ไม่มีผลต่อการวัดผล ระบบจะส่งต่อ ข้อจำกัดไปยังตัวแก้ไขถัดไป ระบบจะส่งข้อจำกัดลงในเชนตัวแก้ไขตามเดิม เว้นแต่จะพบตัวแก้ไขที่ส่งผลต่อการวัดผล จากนั้นระบบจะปรับขนาด ข้อจำกัดอีกครั้งตามความเหมาะสม
3. เมื่อไปถึงโหนดที่ไม่มีโหนดลูก (เรียกว่า "โหนดใบ" ) โหนดนั้นจะกำหนดขนาดตามข้อจำกัดที่ส่งเข้ามา และ ส่งคืนขนาดที่กำหนดนี้ไปยังโหนดแม่
4. โดยองค์ประกอบหลักจะปรับข้อจำกัดตามการวัดขององค์ประกอบย่อยนี้ และ เรียกองค์ประกอบย่อยถัดไปโดยใช้ข้อจำกัดที่ปรับแล้วเหล่านี้
5. เมื่อวัดขนาดขององค์ประกอบย่อยทั้งหมดขององค์ประกอบระดับบนแล้ว องค์ประกอบระดับบนจะกำหนดขนาดของตัวเอง และสื่อสารขนาดดังกล่าวกับองค์ประกอบระดับบนของตัวเอง
6. ด้วยวิธีนี้ ระบบจะข้ามทั้งโครงสร้างแบบ Depth-First ในที่สุดโหนดทั้งหมด จะตัดสินใจเกี่ยวกับขนาดของตนเอง และขั้นตอนการวัดผลจะเสร็จสมบูรณ์

ดูตัวอย่างแบบเจาะลึกได้ในวิดีโอข้อจำกัดและลำดับตัวแก้ไข

ตัวแก้ไขที่มีผลต่อข้อจำกัด

ในส่วนก่อนหน้า คุณได้เรียนรู้ว่าตัวปรับแต่งบางตัวอาจส่งผลต่อขนาดข้อจำกัด ส่วนต่อไปนี้จะอธิบายตัวแก้ไขที่เฉพาะเจาะจงซึ่งส่งผลต่อข้อจำกัด

ตัวแก้ไข size

ตัวแก้ไข size จะประกาศขนาดที่ต้องการของเนื้อหา

ตัวอย่างเช่น ควรแสดงผลทรี UI ต่อไปนี้ในคอนเทนเนอร์ของ 300dp โดย 200dp ข้อจำกัดมีขอบเขตที่อนุญาตให้ความกว้างอยู่ระหว่าง 100dp ถึง 300dp และความสูงอยู่ระหว่าง 100dp ถึง 200dp

ตัวแก้ไข size จะปรับข้อจำกัดขาเข้าให้ตรงกับค่าที่ส่งไปยังตัวแก้ไข ในตัวอย่างนี้ ค่าคือ 150dp

หากความกว้างและความสูงมีขนาดเล็กกว่าขอบเขตการจำกัดที่เล็กที่สุด หรือใหญ่กว่าขอบเขตการจำกัดที่ใหญ่ที่สุด ตัวปรับแต่งจะจับคู่ข้อจำกัดที่ส่งมาให้ใกล้เคียงที่สุดเท่าที่จะทำได้ ในขณะที่ยังคงยึดตามข้อจำกัดที่ส่งมาใน

โปรดทราบว่าการเชื่อมต่อตัวปรับแต่งหลายรายการsizeใช้ไม่ได้ ตัวแก้ไข size ตัวแรกจะกำหนดข้อจำกัดทั้งขั้นต่ำและขั้นสูงสุดเป็นค่าคงที่ แม้ว่าตัวแก้ไขขนาดที่ 2 จะขอขนาดที่เล็กหรือใหญ่กว่า แต่ก็ยังคงต้อง ยึดตามขอบเขตที่แน่นอนที่ส่งมา จึงจะไม่ลบล้างค่าเหล่านั้น

ตัวแก้ไข requiredSize

ใช้ตัวแก้ไข requiredSize แทน size หากต้องการให้โหนด ลบล้างข้อจำกัดขาเข้า ตัวแก้ไข requiredSize จะแทนที่ข้อจำกัดขาเข้า และส่งขนาดที่คุณระบุเป็นขอบเขตที่แน่นอน

เมื่อส่งขนาดกลับขึ้นไปในโครงสร้าง โหนดย่อยจะอยู่ตรงกลางใน พื้นที่ว่าง

ตัวแก้ไข width และ height

ตัวแก้ไข size จะปรับทั้งความกว้างและความสูงของข้อจำกัด เมื่อใช้ตัวแก้ไข width คุณจะตั้งค่าความกว้างคงที่ได้ แต่ยังไม่ต้องกำหนดความสูง ในทำนองเดียวกัน คุณสามารถใช้ตัวแก้ไข height เพื่อกำหนดความสูงคงที่ แต่ปล่อยให้ความกว้างไม่แน่นอนได้โดยทำดังนี้

ตัวแก้ไข sizeIn

ตัวแก้ไข sizeIn ช่วยให้คุณตั้งค่าข้อจำกัดขั้นต่ำและสูงสุดที่แน่นอน สำหรับความกว้างและความสูงได้ ใช้ตัวปรับแต่ง sizeIn หากต้องการควบคุมข้อจำกัดแบบละเอียด

ตัวอย่าง

ส่วนนี้แสดงและอธิบายเอาต์พุตจากข้อมูลโค้ดหลายรายการที่มี ตัวแก้ไขที่เชื่อมโยงกัน

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

ข้อมูลโค้ดนี้จะสร้างเอาต์พุตต่อไปนี้

• ตัวปรับแต่ง fillMaxSize จะเปลี่ยนข้อจำกัดเพื่อกำหนดทั้งความกว้างและความสูงขั้นต่ำเป็นค่าสูงสุด ซึ่งก็คือ 300dp ในความกว้างและ 200dp ในความสูง
• แม้ว่าตัวแก้ไข size จะต้องการใช้ขนาด 50dp แต่ก็ยังต้อง ปฏิบัติตามข้อจำกัดขั้นต่ำที่เข้ามา ดังนั้นตัวปรับ size จะแสดงขอบเขตข้อจำกัดที่แน่นอนของ 300 โดย 200 ด้วย ซึ่งจะsizeไม่สนใจค่าที่ระบุในตัวปรับ size
• Image จะทำตามขอบเขตเหล่านี้และรายงานขนาด 300 x 200 ซึ่ง จะส่งต่อขึ้นไปตามโครงสร้างทั้งหมด

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

ข้อมูลโค้ดนี้จะสร้างเอาต์พุตต่อไปนี้

• fillMaxSize ตัวปรับจะปรับข้อจำกัดเพื่อตั้งค่าทั้งความกว้างและความสูงขั้นต่ำเป็นค่าสูงสุด ซึ่งก็คือ 300dp ในความกว้าง และ 200dp ในความสูง
• ตัวแก้ไข wrapContentSize จะรีเซ็ตข้อจำกัดขั้นต่ำ ดังนั้นในขณะที่ fillMaxSize ทำให้เกิดข้อจำกัดคงที่ wrapContentSize จะรีเซ็ตกลับ เป็นข้อจำกัดแบบมีขอบเขต ตอนนี้โหนดต่อไปนี้สามารถใช้พื้นที่ทั้งหมด อีกครั้ง หรือมีขนาดเล็กกว่าพื้นที่ทั้งหมดก็ได้
• size ตัวแก้ไขจะกำหนดข้อจำกัดเป็นขอบเขตต่ำสุดและสูงสุดของ 50
• Image จะเปลี่ยนเป็นขนาด 50 x 50 และตัวแก้ไข size จะส่งต่อขนาดนั้น
• ตัวแก้ไข wrapContentSize มีคุณสมบัติพิเศษ โดยจะนำ องค์ประกอบย่อยมาวางไว้ตรงกลางขอบเขตขั้นต่ำที่มีอยู่ซึ่ง ส่งไปยังองค์ประกอบนั้น ดังนั้นขนาดที่คอมโพเนนต์สื่อสารกับคอมโพเนนต์หลักจึงเท่ากับ ขอบเขตขั้นต่ำที่ส่งไปยังคอมโพเนนต์

การรวมตัวแก้ไขเพียง 3 รายการจะช่วยให้คุณกำหนดขนาดของ Composable และ จัดกึ่งกลางในองค์ประกอบระดับบนได้

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

ข้อมูลโค้ดนี้จะสร้างเอาต์พุตต่อไปนี้

• ตัวแก้ไข clip จะไม่เปลี่ยนข้อจํากัด
• paddingตัวแก้ไขจะลดข้อจำกัดสูงสุด
• ตัวแก้ไข size จะตั้งค่าข้อจำกัดทั้งหมดเป็น 100dp
• Image เป็นไปตามข้อจํากัดเหล่านั้นและรายงานขนาด 100dp โดย 100dp
• padding ตัวแก้ไขจะเพิ่ม 10dp ในทุกด้านให้กับขนาดที่รายงานโดย Image ดังนั้นเลย์เอาต์ที่มีระยะขอบจะรายงานความกว้างและความสูงเป็น 120dp
• ตอนนี้ในระยะการวาด ตัวปรับแต่ง clip จะทำงานบน Canvas ขนาด 120dp x 120dp ซึ่งจะสร้างมาสก์วงกลมที่มีขนาดดังกล่าว
• จากนั้นตัวแก้ไข padding จะแทรกเนื้อหาโดยเว้นขอบ 10dp ทุกด้าน ซึ่งจะ ลดขนาด Canvas สำหรับ Image เป็น 100dp โดยเว้นขอบ 100dp
• ระบบจะวาด Image ใน Canvas ที่เล็กลงนั้น ระบบจะครอบตัดรูปภาพตาม วงกลมต้นฉบับของ 120dp ดังนั้นเอาต์พุตจึงเป็นผลลัพธ์ที่ไม่กลม