หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

ในดีไซน์ Material มี FAB อยู่ 4 ประเภท ดังนี้

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

ตัวอย่างองค์ประกอบของปุ่มการทำงานแบบลอย 4 อย่าง — **รูปที่ 1** ปุ่มการทำงานแบบลอย 4 ประเภท

แพลตฟอร์ม API

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

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

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

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

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

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

ปุ่มการทำงานแบบลอยแบบมาตรฐานที่มีมุมโค้งมน เงา และปุ่ม "เพิ่ม" ไอคอน — **รูปที่ 2** ปุ่มการทำงานแบบลอย

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

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

@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

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

การใช้งาน SmallFloatingActionButton ที่มีปุ่ม "add" ไอคอน — **รูปที่ 3** ปุ่มการทำงานแบบลอยขนาดเล็ก

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

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

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

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

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

การใช้งาน LargeFloatingActionButton ที่มี "add" ไอคอน — **รูปที่ 4** ปุ่มการทำงานแบบลอยขนาดใหญ่

ปุ่มขยาย

คุณสามารถสร้างปุ่มการทำงานแบบลอยที่ซับซ้อนขึ้นได้ด้วย ExtendedFloatingActionButton Composable ความแตกต่างหลักระหว่าง และ 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

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

การใช้งาน ExtendedFloatingActionButton ที่แสดงข้อความ "ปุ่มแบบขยาย" และไอคอนแก้ไข — **รูปที่ 5** ปุ่มการทำงานแบบลอยที่มีทั้งข้อความและไอคอน

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

แพลตฟอร์ม API

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

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

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

ปุ่มขยาย

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