ปุ่มการทำงานแบบลอย

ปุ่มการทำงานแบบลอย (FAB) เป็นปุ่มที่เน้นสูงซึ่งช่วยให้ผู้ใช้ดำเนินการหลักในแอปพลิเคชันได้ ปุ่มนี้จะส่งเสริมการดำเนินการที่มุ่งเน้นเพียงอย่างเดียวซึ่งเป็นเส้นทางที่พบบ่อยที่สุดที่ผู้ใช้อาจเลือก และมักจะพบว่าปุ่มนี้ยึดอยู่ที่ด้านขวาล่างของหน้าจอ

พิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ FAB

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

ใน Material Design มี FAB อยู่ 4 ประเภท ได้แก่

• FAB: ปุ่มการทำงานแบบลอยขนาดปกติ
• FAB ขนาดเล็ก: ปุ่มการทำงานแบบลอยที่มีขนาดเล็กลง
• FAB ขนาดใหญ่: ปุ่มการทำงานแบบลอยขนาดใหญ่ขึ้น
• FAB แบบขยาย: ปุ่มการทำงานแบบลอยที่มีมากกว่าไอคอน

แพลตฟอร์ม API

แม้ว่าจะมี Composable หลายรายการที่คุณใช้สร้างปุ่มการทำงานแบบลอยที่สอดคล้องกับ Material Design ได้ แต่พารามิเตอร์ของปุ่มเหล่านั้นก็ไม่ได้แตกต่างกันมากนัก พารามิเตอร์หลักที่คุณควรคำนึงถึงมีดังนี้

• onClick: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่ม
• containerColor: สีของปุ่ม
• contentColor: สีของไอคอน

ปุ่มการทำงานแบบลอย

หากต้องการสร้างปุ่มการทำงานแบบลอยทั่วไป ให้ใช้คอมโพสิเบิล FloatingActionButton พื้นฐาน ตัวอย่างต่อไปนี้แสดงการใช้งาน FAB พื้นฐาน

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

การใช้งานนี้จะปรากฏดังนี้

ปุ่มขนาดเล็ก

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

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

การใช้งานนี้จะปรากฏดังนี้

ปุ่มขนาดใหญ่

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

ต่อไปนี้เป็นการใช้งาน FAB ขนาดใหญ่แบบตรงไปตรงมา

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

การใช้งานนี้จะปรากฏดังนี้

ปุ่มแบบขยาย

คุณสร้างปุ่มการทำงานแบบลอยที่ซับซ้อนมากขึ้นได้ด้วยคอมโพสิเบิล ExtendedFloatingActionButton ความแตกต่างที่สำคัญระหว่างเหตุการณ์นี้กับ FloatingActionButton คือเหตุการณ์นี้มีพารามิเตอร์ icon และ text โดยเฉพาะ ซึ่งช่วยให้คุณสร้างปุ่มที่มีเนื้อหาซับซ้อนมากขึ้นซึ่งปรับขนาดให้พอดีกับเนื้อหาได้อย่างเหมาะสม

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้ ExtendedFloatingActionButton โดยมีค่าตัวอย่างที่ส่งสำหรับ icon และ text

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

การใช้งานนี้จะปรากฏดังนี้

แหล่งข้อมูลเพิ่มเติม

• ปุ่มที่พบบ่อย
• เอกสาร UI เนื้อหา