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

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

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

ตัวแก้ไขในแผนผัง UI

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

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

รูปที่ 1 ตัวแก้ไขที่ตัดโหนดเลย์เอาต์ในต้นไม้ UI

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

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

ดังที่แสดงในรูปที่ 2 การใช้งานคอมโพสิเบิล Image และ Text ประกอบด้วยเชนของตัวแก้ไขที่รวมโหนดเลย์เอาต์เดี่ยว การใช้งาน Row และ Column เป็นเพียงโหนดเลย์เอาต์ที่อธิบายวิธีจัดวางองค์ประกอบย่อย

รูปที่ 2 โครงสร้างแบบต้นไม้เดียวกันกับในรูปที่ 1 แต่มี Composable ใน แผนผัง UI แสดงเป็นภาพต่อกันของแป้นกดร่วม

โดยสรุป

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

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

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

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

1. วัดผลโหนดย่อย: โหนดจะวัดผลโหนดย่อย (หากมี)
2. กำหนดขนาดเอง: จากการวัดดังกล่าว โหนดจะเลือกเอง ขนาด
3. วางรายการย่อย: แต่ละโหนดย่อยจะวางตามตำแหน่งของโหนดนั้นๆ

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

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

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

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

รูปที่ 3 ข้อจำกัดแบบมีขอบเขต

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

รูปที่ 4 ข้อจำกัดที่ไม่มีขอบเขต

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

รูปที่ 5 มีข้อจำกัดที่แน่นอน

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

รูปที่ 6 ชุดค่าผสมของข้อจำกัดแบบมีขอบเขตและแบบไม่มีขอบเขต รวมถึงความกว้างและความสูงที่แน่นอน

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

วิธีส่งข้อจำกัดจากรายการหลักไปยังรายการย่อย

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

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

ในระดับสูง อัลกอริทึมจะทำงานในลักษณะต่อไปนี้

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

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

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

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

ตัวปรับ size

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

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

รูปที่ 7 ข้อจำกัดที่มีขอบเขตในแผนผัง UI และการนำเสนอใน คอนเทนเนอร์

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

รูปที่ 8 ข้อจำกัดการปรับตัวจำกัดของ size เป็น 150dp

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

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

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

รูปที่ 10 ห่วงโซ่ของตัวปรับแต่ง size 2 รายการ ซึ่งค่าที่สองผ่านไป ใน (50dp) ไม่ลบล้างค่าแรก (100dp)

ตัวปรับ requiredSize

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

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

รูปที่ 11 ตัวปรับ requiredSize ลบล้างข้อจำกัดขาเข้าจากตัวปรับ size

แป้นกดร่วม width และ height

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

รูปที่ 12 ตัวปรับแต่ง width และตัวปรับแต่ง height ที่ตั้งค่าความกว้างคงที่ และความสูง ตามลำดับ

ตัวปรับ sizeIn

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

รูปที่ 13 ตัวแก้ไข sizeIn ที่มี minWidth, maxWidth, minHeight และ ตั้งค่า maxHeight แล้ว

ตัวอย่าง

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

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

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

• ตัวแก้ไข fillMaxSize จะเปลี่ยนข้อจำกัดเพื่อตั้งค่า ความกว้างและความสูงขั้นต่ำถึงค่าสูงสุด — ความกว้าง 300dp และ 200dp สูง
• แม้ว่าเครื่องปรับ size ต้องการใช้ขนาด 50dp แต่ เพื่อให้สอดคล้องกับข้อจำกัดขั้นต่ำที่เข้ามาใหม่ ดังนั้น ตัวปรับ size จะแสดงผลขอบเขตข้อจำกัดที่แน่นอนของ 300 โดย 200 ด้วย ซึ่งจะละเว้นค่าที่ระบุไว้ในตัวปรับ 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 คูณ 50 และตัวแก้ไข size ส่งต่อเรื่องดังกล่าว
• ตัวแก้ไข wrapContentSize มีคุณสมบัติพิเศษ ใช้เวลา ย่อยและใส่ไว้ในกึ่งกลางของขอบเขตขั้นต่ำที่มีให้ซึ่ง ที่ส่งมาให้ ขนาดที่สื่อสารกับพ่อแม่จะเท่ากับ ขอบเขตขั้นต่ำที่ถูกส่งผ่าน

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

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

ข้อมูลโค้ดนี้จะแสดงผลลัพธ์ต่อไปนี้

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