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

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

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

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

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

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

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

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

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

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

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

โดยสรุปได้ดังนี้

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

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

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

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

  1. วัดรายการย่อย: โหนดวัดรายการย่อย หากมี
  2. กำหนดขนาดเอง: จากการวัดดังกล่าว โหนดจะเลือกเอง ขนาด
  3. วางโหนดย่อย: วางโหนดย่อยแต่ละรายการให้สัมพันธ์กับโหนดของโหนดเอง ตำแหน่ง

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

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

ข้อจำกัดอาจมีค่าใดค่าหนึ่งต่อไปนี้

  • มีขอบเขต: โหนดมีความกว้างและความสูงสูงสุดและต่ำสุด
ข้อจำกัดขอบเขตขนาดต่างๆ ภายในคอนเทนเนอร์
รูปที่ 3 ข้อจำกัดที่มีขอบเขต
  • ไม่มีขอบเขต: โหนดไม่จำกัดขนาด ความกว้างสูงสุดและ ขอบเขตความสูงได้รับการตั้งค่าเป็นอนันต์
ข้อจำกัดที่ไม่มีขอบเขตซึ่งกำหนดความกว้างและความสูงเป็นอนันต์ ข้อจำกัดขยายออกไปนอกคอนเทนเนอร์
รูปที่ 4 ข้อจำกัดที่ไม่มีขอบเขต
  • แบบตรงทั้งหมด: ระบบจะขอให้โหนดปฏิบัติตามข้อกำหนดด้านขนาดที่แน่นอน ขั้นต่ำ และขอบเขตสูงสุดเป็นค่าเดียวกัน
ข้อจำกัดที่แน่นอนซึ่งสอดคล้องกับข้อกำหนดขนาดที่แน่นอนในคอนเทนเนอร์
รูปที่ 5 มีข้อจำกัดที่แน่นอน
  • ชุดค่าผสม: โหนดเป็นไปตามชุดค่าผสมของประเภทข้อจำกัดข้างต้น ตัวอย่างเช่น ข้อจำกัดอาจเชื่อมโยงความกว้างในขณะที่อนุญาตให้ ความสูงสูงสุดที่ไม่มีขอบเขต หรือกำหนดความกว้างที่แน่นอนแต่ระบุความสูงแบบตายตัว
คอนเทนเนอร์ 2 รายการที่แสดงชุดค่าผสมของข้อจำกัดที่มีขอบเขตและไม่มีขอบเขต กับความกว้างและความสูงที่แน่นอน
รูปที่ 6 ชุดค่าผสมของข้อจำกัดที่มีขอบเขตและไม่มีขอบเขตและความกว้างที่แน่นอน และความสูง

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

วิธีส่งต่อข้อจำกัดจากระดับบนสุดสู่รายการย่อย

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

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

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

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

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

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

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

แป้นกดร่วม size

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

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

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

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

วันที่ เหมือนกันกับรูปที่ 7 ยกเว้นตัวปรับขนาดที่ปรับเปลี่ยนข้อจำกัดขาเข้าเพื่อให้ตรงกับค่าที่ส่งมายัง
รูปที่ 8 ข้อจำกัดการปรับตัวจำกัดของ size เป็น 150dp

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

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

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

วันที่ เชนของตัวปรับขนาด 2 รายการในโครงสร้าง UI และการนำเสนอในคอนเทนเนอร์ ซึ่งเป็นผลลัพธ์ของค่าแรกที่ส่งผ่าน ไม่ใช่ค่าที่ 2
รูปที่ 10 ห่วงโซ่ของตัวปรับแต่ง size 2 รายการ ซึ่งค่าที่สองผ่านไป ใน (50dp) ไม่ลบล้างค่าแรก (100dp)

แป้นกดร่วม requiredSize

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

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

วันที่ ขนาดและตัวปรับขนาด requiredSize ที่เชื่อมโยงในแผนผัง UI และตัวแปร ตัวแทนในคอนเทนเนอร์ ข้อจำกัดตัวปรับขนาดที่จำเป็นจะลบล้างตัวปรับขนาด ข้อจำกัด
รูปที่ 11 ตัวแก้ไข requiredSize จะลบล้างข้อจำกัดขาเข้าจาก ตัวปรับแต่ง size

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

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

วันที่ ต้นไม้ UI 2 ต้น ต้นหนึ่งมีตัวแก้ไขความกว้างและการนำเสนอคอนเทนเนอร์ของต้นไม้ และอีกต้น ด้วยตัวปรับความสูงและการนำเสนอ
รูปที่ 12 ตัวปรับแต่ง width และตัวปรับแต่ง height ที่ตั้งค่าความกว้างคงที่ และความสูง ตามลำดับ

แป้นกดร่วม sizeIn

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

วันที่ แผนผัง UI ที่มีตัวปรับแต่ง 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 คูณ 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 แบบเข้าด้วยกัน คุณจะกำหนดขนาดสำหรับ Composable และ ให้อยู่กึ่งกลางระดับบนสุด

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 ดังนั้นผลลัพธ์จะเป็นผลลัพธ์ที่ไม่ใช่วงกลม
ก่อนหน้า
ข้อมูลเบื้องต้นเกี่ยวกับเลย์เอาต์
ถัดไป
ตัวแก้ไขที่กำหนดเอง