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

ใช้ 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 องค์ประกอบย่อย 1 จะขยายขนาดขึ้น 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 ค่าการขยายทั้งหมดคือ 6 บุตรหลานคนที่ 1 มีส่วนสูงเพิ่มขึ้น (1 / 6) * 300 = 50dp บุตรหลานคนที่ 2 มีส่วนสูงเพิ่มขึ้น (2 / 6) * 300 = 100dp บุตรหลานคนที่ 3 เพิ่มขึ้น (3 / 6) * 300 = 150dp

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

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

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

ขนาดคอนเทนเนอร์	FlexBox UI
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

ลำดับรายการ

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

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

ตัวอย่างต่อไปนี้แสดงรายการย่อย 2 รายการ โดยรายการแรกมี order เริ่มต้นเป็น 0 และรายการที่ 2 มีลำดับเป็น -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