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

ใช้ 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` คือความกว้างของข้อความทั้งหมดในบรรทัดเดียวโดยไม่มีการตัดข้อความ	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 ก่อนการขยาย

รายการย่อย 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 ก่อนการขยาย โดยมีค่าการขยายที่แตกต่างกัน

ค่า grow รวมคือ 6

รายการย่อย 1 ขยาย (1 / 6) * 300 = 50dp

รายการย่อย 2 ขยาย (2 / 6) * 300 = 100dp

รายการย่อย 3 ขยาย (3 / 6) * 300 = 150dp

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

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

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

ตัวอย่างต่อไปนี้แสดงคอมโพสได้ Text 2 รายการที่มีข้อความเดียวกัน รายการย่อยแรกมีค่า shrink เป็น 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

เมื่อคอนเทนเนอร์ย่อ รายการย่อย 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 มี order เป็น -1 หลังจากจัดเรียงแล้ว รายการย่อย 1 จะปรากฏหลังรายการย่อย 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

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

ภาพรวม