ตั้งค่าลักษณะการทำงานของรายการ

ใช้ Modifier.flex เพื่อควบคุมวิธีที่รายการเปลี่ยนขนาด ลำดับ และการจัดแนว ภายใน FlexBox

ขนาดสินค้า

ใช้พร็อพเพอร์ตี้ basis, grow และ shrink เพื่อควบคุมขนาดของรายการ

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}FlexBoxSnippets.kt

ตั้งค่าขนาดเริ่มต้น

ใช้ basis เพื่อระบุขนาดเริ่มต้นของรายการก่อนที่จะกระจายพื้นที่เพิ่มเติม คุณอาจคิดว่านี่คือขนาดที่ต้องการของรายการ

ประเภทค่า	พฤติกรรม	ข้อมูลโค้ด หมายเหตุ: กล่องมีขนาดโดยธรรมชาติสูงสุด `100dp`	ตัวอย่างการใช้ความกว้างของคอนเทนเนอร์ `600dp`
`Auto` (ค่าเริ่มต้น)	ใช้ขนาดสูงสุดของรายการ เช่น ความกว้างภายในสูงสุดของ `Text` Composable คือความกว้างของข้อความทั้งหมดในบรรทัดเดียวโดยไม่มีการตัดข้อความ	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
คงที่ `dp`	ขนาดคงที่ใน Dp	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
เปอร์เซ็นต์	เปอร์เซ็นต์ของขนาดคอนเทนเนอร์	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

หากค่าพื้นฐานน้อยกว่าขนาดขั้นต่ำโดยธรรมชาติของรายการ ระบบจะใช้ขนาดขั้นต่ำโดยธรรมชาติแทน เช่น หากTextรายการที่มีคำ ต้องมี 50dp เพื่อแสดง แต่ก็มี basis = 10.dp ด้วย ระบบจะใช้ค่า 50dp

ขยายรายการเมื่อมีพื้นที่

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

ตัวอย่างต่อไปนี้แสดง FlexBox ที่มีรายการย่อย 3 รายการ แต่ละรายการมีมูลค่า พื้นฐานเท่ากับ 100dp บุตรคนแรกมีค่า grow เป็นค่าบวก เนื่องจากมีองค์ประกอบย่อยที่มีค่า grow เพียงรายการเดียว ค่าจริงจึงไม่เกี่ยวข้อง ตราบใดที่ค่าเป็นบวก องค์ประกอบย่อยจะได้รับพื้นที่เพิ่มเติมทั้งหมด

รูปภาพแสดงFlexBoxลักษณะการทำงานเมื่อขนาดคอนเทนเนอร์เป็น 600dp

FlexBox {
    RedRoundedBox(
        title = "400dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(title = "100dp")
    GreenRoundedBox(title = "100dp")
}FlexBoxSnippets.kt

บุตรแต่ละคนมีมูลค่าพื้นฐาน 100dp มีพื้นที่ว่างเพิ่มเติม 300dp

ไอเทม 3 รายการที่มีพื้นฐาน 100dp แต่ละรายการในคอนเทนเนอร์ 600dp ก่อนการขยาย

Child 1 ขยายขนาดขึ้น 300dp เพื่อเติมเต็มพื้นที่ว่าง

รายการแรกจะขยายเพื่อเติมพื้นที่ว่างเพิ่มเติม 300dp

ในตัวอย่างต่อไปนี้ ขนาดคอนเทนเนอร์และbasisมีขนาดเท่ากัน ความแตกต่างคือแต่ละรายการย่อยมีgrowค่าที่ต่างกัน

FlexBox {
    RedRoundedBox(
        title = "150dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(
        title = "200dp",
        modifier = Modifier.flex { grow = 2f }
    )
    GreenRoundedBox(
        title = "250dp",
        modifier = Modifier.flex { grow = 3f }
    )
}FlexBoxSnippets.kt

บุตรแต่ละคนมีมูลค่าพื้นฐาน 100dp มีพื้นที่ว่างเพิ่มเติม 300dp

ไอเทม 3 รายการที่มีพื้นฐาน 100dp แต่ละรายการในคอนเทนเนอร์ 600dp ก่อนการเติบโต โดยมีค่าการเติบโตที่แตกต่างกัน

มูลค่าการเติบโตรวมคือ 6

เด็ก 1 มีการเติบโต (1 / 6) * 300 = 50dp

ส่วนที่ 2 เพิ่มขึ้น (2 / 6) * 300 = 100dp

บุตรหลาน 3 เติบโตขึ้น (3 / 6) * 300 = 150dp

รายการจะขยายจนเต็มพื้นที่เพิ่มเติม 300dp โดยอิงตามค่าการขยายที่สัมพันธ์กัน

ย่อขนาดรายการเมื่อมีพื้นที่ไม่เพียงพอ

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

ตัวอย่างต่อไปนี้แสดง Composable 2 รายการที่มีข้อความเดียวกันText องค์ประกอบย่อยแรกมีค่าการย่อเป็น 1f ซึ่งหมายความว่าองค์ประกอบจะย่อเพื่อดูดซับพื้นที่ที่ขาดหายไปทั้งหมด

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}FlexBoxSnippets.kt

เมื่อขนาดคอนเทนเนอร์เล็กลง Child 1 ก็จะเล็กลง

ขนาดคอนเทนเนอร์	UI ของ FlexBox
`700dp`
`500dp`
`450dp`

การจัดแนวรายการ

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

เช่น FlexBox นี้มี alignItems ตั้งค่าเป็น Start และมีองค์ประกอบย่อย 5 รายการ ซึ่งจะลบล้างการจัดแนวแกนไขว้

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}FlexBoxSnippets.kt

เด็ก 5 คนที่มีขนาดแตกต่างกันแทนที่พร็อพเพอร์ตี้ alignItems

ลำดับรายการ

โดยค่าเริ่มต้น FlexBox จะจัดวางรายการตามลำดับที่ประกาศในโค้ด ลบล้างลักษณะการทำงานนี้โดยใช้ order

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

ตัวอย่างต่อไปนี้แสดงรายการย่อย 2 รายการ โดยรายการแรกมีลำดับ order เริ่มต้นเป็น 0 และรายการที่ 2 มีลำดับเป็น -1 หลังจากจัดเรียงแล้ว Child 1 จะปรากฏ หลังจาก Child 2

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}FlexBoxSnippets.kt

กล่องโค้งมน 2 กล่อง โดยกล่องแรกมีข้อความว่า Hello และกล่องที่ 2 มีข้อความว่า World

ตั้งค่าลักษณะการทำงานของคอนเทนเนอร์

ดูข้อมูลเกี่ยวกับอุปกรณ์พับได้