TabRow และหน้าที่ปัดได้
เพิ่มแท็บแนวนอนพร้อมการแบ่งหน้า
TabRow และหน้าที่ปัดได้ เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำความรู้จัก TabRow
ขณะที่ NavigationBar อยู่ด้านล่าง TabRow จะวางแถวแท็บไว้ด้านบน เหมาะสำหรับสลับระหว่างมุมมองที่เกี่ยวข้องกันภายในหน้าจอเดียว 🗂️
TabRow กับ NavigationBar
ใช้ TabRow สำหรับส่วนต่าง ๆ ภายในหน้าจอ เช่น Posts และ About ส่วน NavigationBar ใช้สำหรับปลายทางหลักของแอป ทั้งสองมีหน้าที่และแถบคนละแบบ
เพิ่มแท็บไว้ภายใน
TabRow รับ selectedTabIndex และแลมบ์ดาเนื้อหา ซึ่งภายในนั้นคุณสร้าง Tab หนึ่งรายการต่อหนึ่งส่วน
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}แต่ละแท็บเลือกได้
แต่ละ Tab มีแฟล็ก selected และ onClick ของตัวเอง รวมถึงข้อความหรือไอคอน เช่นเดียวกับ NavigationBarItem
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)ทำให้หน้าเลื่อนด้วยการปัด
หากต้องการปัดระหว่างหน้า ให้จับคู่แท็บกับ HorizontalPager ซึ่งจะแสดงทีละหนึ่งหน้าเต็มความกว้าง
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }สถานะเดียว มุมมองสองแบบ
เคล็ดลับคือการใช้ pagerState ร่วมกัน TabRow จะอ่านหน้าปัจจุบันของสถานะนี้ ส่วนตัวเลื่อนหน้าจะเปลี่ยนหน้านั้นเมื่อผู้ใช้ปัด
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }การแตะควรเลื่อนตัวเลื่อนหน้า
เมื่อแตะแท็บ ให้เรียก animateScrollToPage เพื่อให้ตัวเลื่อนหน้าค่อย ๆ เลื่อนไปยังหน้านั้น
scope.launch {
pagerState.animateScrollToPage(i)
}เรียกใช้ภายในขอบเขต
เนื่องจาก animateScrollToPage เป็นการเรียกแบบ suspend ให้เรียกใช้จาก rememberCoroutineScope ภายใน onClick
val scope = rememberCoroutineScope()แท็บที่เลื่อนได้
มีแท็บจำนวนมากใช่ไหมครับ/ค่ะ ใช้ ScrollableTabRow เพื่อให้แท็บเลื่อนในแนวนอนได้ แทนการบีบทุกแท็บให้พอดีกับความกว้างหน้าจอ
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }กำหนดรูปแบบตัวบ่งชี้
เส้นใต้ที่เคลื่อนที่คือช่อง ตัวบ่งชี้ คุณสามารถเปลี่ยนสีหรือปรับขนาดให้เข้ากับธีมและแบรนด์ของคุณได้
indicator = { tabPositions -> /* custom underline */ }รูปแบบตัวเลื่อนหน้าร่วมกับแท็บ
การรวม TabRow กับ HorizontalPager โดยใช้สถานะร่วมกันหนึ่งชุด เป็นรูปแบบมาตรฐานของ Compose สำหรับหน้าจอที่มีแท็บและปัดได้
ตรวจสอบอย่างรวดเร็ว
คุณสร้างหน้าแบบมีแท็บที่ปัดได้แล้ว มาตรวจสอบขั้นสุดท้ายกัน!
สรุปทบทวน
คุณเชี่ยวชาญ TabRow ร่วมกับ HorizontalPager แล้ว: pagerState ที่ใช้ร่วมกันจะเชื่อมทั้งสองเข้าด้วยกัน animateScrollToPage จัดการการแตะ และ ScrollableTabRow รองรับแท็บจำนวนมาก เรียนจบหลักสูตรแล้ว! 🚀
เรียนรู้ Kotlin ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “TabRow และหน้าที่ปัดได้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “TabRow และหน้าที่ปัดได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “TabRow และหน้าที่ปัดได้”
เพิ่มแท็บแนวนอนพร้อมการแบ่งหน้า คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “TabRow และหน้าที่ปัดได้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- NavigationBar พร้อมแท็บหลายแท็บ
- เน้นเส้นทางที่เลือก
- คงสถานะแท็บเมื่อสลับ
- TabRow และหน้าที่ปัดได้