AppBar — มันคืออะไร การตั้งค่าและวิจเจ็ต Flutter

AppBar ใน Flutter คืออะไร

AppBar เป็นองค์ประกอบแผงด้านบน Material มาตรฐานที่ปรากฏที่ส่วนบนของ Scaffold ประกอบด้วยชื่อหน้าจอ ปุ่มนำทาง (โดยทั่วไปเป็นไอคอน “แฮมเบิร์เกอร์” หรือลูกศร “กลับ”) และการกระทำ — ไอคอนที่เปิดการค้นหา การตั้งค่า หรือฟังก์ชันอื่นๆ AppBar ปรับตัวให้เข้ากับแพลตฟอร์มโดยอัตโนมัติ: บน Android ใช้เงา Material มาตรฐานด้านล่าง บน iOS — ดีไซน์แบนราบกว่าพร้อมความโปร่งใส

AppBar ใช้งานอินเทอร์เฟย์ส PreferredSizeWidget ซึ่งหมายความว่าความสูงของมันถูกกำหนดตามและรู้ได้ก่อนการสร้าง โดยค่าเริ่มต้น ความสูง AppBar คือ 56dp บน Android และ 44dp บน iOS ในแนวตั้ง โดยคำนึงถึง SafeArea ด้านบน คุณสมบัตินี้ทำให้ Scaffold สามารถคำนวณพื้นที่ว่างสำหรับ body ได้ล่วงหน้า หลีกเลี่ยงการประกอบใหม่ระหว่างการเรนเดอร์

ตาม Flutter Material Library Guide (2026) AppBar ผ่านการปรับปรุงหลายครั้ง: ใน Flutter 1.x มันเป็นคอนเทนเนอร์ที่มีข้อความ Flutter 2.x ได้รับการรองรับ Material 3 และ flexibleSpace และใน Flutter 3.x — การผนวกานกับ System UI (สีแถบสถานะ ความโปร่งใส) AppBar สมัยใหม่รองรับ Dynamic Color จาก Material You บนอุปกรณ์ Android 12+

โครงสร้าง AppBar: คุณสมบัติและพารามิเตอร์

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

Title และ leading: การตั้งค่าชื่อเรื่องและการนำทาง

คุณสมบัติ title รับวิจเจ็ตใดก็ได้ แต่ที่ใช้กันมากที่สุดคือการใช้ Text พร้อมการตั้งค่ารูปแบผ่าน TextStyle สำหรับชื่อเรื่องยาว แนะนำให้ห่อ title ใน Flexible เพื่อให้ข้อความถูกตัดอย่างถูกต้องเมื่อพื้นที่มีจำกัด คุณสมบัติ leading จะถูกแทนที่ด้วย BackButton โดยอัตโนมัติเมื่อนำทางไปยังหน้าจอซ้อนกันผ่าน Navigator.push หากไม่ได้ตั้งค่าอย่างชัดเจน

Actions: การวางไอคอนการกระทำ

รายการ actions ประกอบด้วยวิจเจ็ตที่เรียงชิดชายขวาของ AppBar แต่ละองค์ไม่ควรกว้างกว่า 48dp (มาตรฐาน Material Design) สำหรับการจัดกลุ่มการกระทำ ให้ใช้ PopupMenuButton — นี่จะซ่อนตัวเลือกที่สำคัญน้อยในเมนูแบบเลื่อนลง และทำตามคำแนะนำของ Material เกี่ยวกับความหนาแน่นของส่วนติดต่อผู้ใช้

การปรับแต่ง AppBar: รูปแบบ สี และพฤติกรรม

AppBar รองรับการปรับแต่งแบบลึกผ่านคุณสมบัติเรื่องสี เงา และรอบว่าง รูปแบบพื้นฐานได้รับการสืบทอดมาจากเทมของแอพพลิเคชัน แต่แต่ละคุณสมบัติสามารถเกินค่าได้เฉพาะจะ ดูที่สถานการณ์การตั้งค่าหลักๆ

สีพื้นหลังของ AppBar ถูกกำหนดผ่าน backgroundColor หากไม่ระบุ จะใช้ appBarTheme จาก ThemeData ใน Material 3 สีของ AppBar จะถูกคำนวณโดยอัตโนมัติจาก ColorScheme.primary แต่สามารถเกินค่าได้สำหรับหน้าจอเฉพาะ AppBar โปร่งใส (มักใช้ในโปรไฟล์) ให้ตั้งค่า backgroundColor: Colors.transparent พร้อม elevation: 0

คุณสมบัติ elevation ควบคุมเงาภายใต้ AppBar ค่า 0 จะลบเงา สร้างผลการแผงราบซึ่งเกี่ยวข้องกับ Material 3 ค่า 4 ให้เงา Material Design มาตรฐาน สำหรับการควบคุมเงาแบบกำหนดเอง ให้ใช้ shadowColor — สีเงาที่แยกแผงออกจากเนื้อหาได้อย่างชัดเจน

สำหรับควบคุมสีข้อความใน AppBar ให้ใช้ foregroundColor คุณสมบัตินี้มีผลต่อสีของชื่อเรื่อง ไอคอน และข้อความใน actions เมื่อเปลี่ยน backgroundColor โปรแกรมจะเลือก foregroundColor ที่ต่างกันโดยอัตโนมัติ แต่สามารถบังคับได้สำหรับการออกแบบที่ไม่มาตรฐาน

SliverAppBar: เวอร์ชันแอนิเมชันของ AppBar

SliverAppBar เป็นส่วนขยายของ AppBar สำหรับใช้ภายใน CustomScrollView ที่รองรับแอนิเมชันขณะเลื่อน: การยุบ ผลการสเตอร์โีโอ และการปักพิก ต่างจาก AppBar มาตรฐาน SliverAppBar เป็นวิจเจ็ต sliver และสามารถเปลี่ยนขนาดได้อย่างเปลี่ยนแปลงขึ้นอยู่กับตำแหน่งการเลื่อน

โหมดหลักของ SliverAppBar ถูกกำหนดโดยการรวมของคุณสมบัติ pinned, floating และ snap ในโหมด pinned แผงจะแสดงผลอยู่เสมอในส่วนบนของหน้าจอ ในโหมด floating จะปรากฏขึ้นเมื่อเลื่อนกลับ การรวม floating + snap สร้างพฤติกรรมแผงแบบเหนียวที่ปรากฏขึ้นเมื่อเลื่อนขึ้นเล็กน้อย ซึ่งมักใช้ในฟีดข่าว

ตาม Flutter API SliverAppBar (2026) สำหรับการใช้ SliverAppBar จำเป็นต้องแทนที่ ListView หรือ Column ทั่วไปด้วย CustomScrollView ที่มีวิจเจ็ต sliver Scaffold จะทำงานต่อไปอย่างถูกต้อง แต่คุณสมบัติ appBar ของ Scaffold ต้องเป็น null — SliverAppBar จะถูกวางไว้ภายใน CustomScrollView เป็น sliver ตัวแรก

ตัวอย่างการตั้งค่า AppBar ในแอพพลิเคชัน

มาดูตัวอย่างของ AppBar ที่มีการค้นหา เมนูแบบเลื่อนลง และ TabBar โค้ดนี้แสดงการตั้งค่าแผงด้านบนที่พบได้ทั่วไปในแอพพลิเคชันผลิตภัณฑ์ Flutter

Scaffold(
  appBar: AppBar(
    title: const Text('แคตตาล็อก'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('การตั้งค่า')),
          const PopupMenuItem(value: 'about', child: Text('เกี่ยวกับแอพ')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

ในตัวอย่าง AppBar ประกอบด้วยชื่อเรื่องที่จัดกลาง ปุ่มเปิด Drawer ด้านซ้าย ไอคอนค้นหา และเมนูแบบเลื่อนลงด้านขวา TabBar ด้านล่างช่วยให้สามารถสลับระหว่างหมวดหมู่สินค้า การตั้งค่านี้ครอบคลุมสิ่งที่ส่วนใหญ่ของสถานการณ์แอพพลิเคชันมือถือ: การนำทาง การค้นหา ตัวเลือกเพิ่มเติม และการสลับส่วน — ทุกอย่างอยู่ในแผงด้านบนเดียว