ใช้ Overlay .of ใน Flutter: คู่มือและตัวอย่าง

Overlay.of เป็นวิธีการแบบสแตติก Flutter ที่ใช้ในการดึงข้อมูล OverlayState สำหรับ Overlay วิดเจ็ต บรรพบุรุษที่ใกล้ที่สุด

วิด Overlay เจ็ตใช้เพื่อสร้างกลุ่มของวิดเจ็ตที่สามารถแสดงบนวิดเจ็ตอื่นๆ ในแอ Flutter ปพลิเคชัน วิธี นี้ Overlay.of ช่วยให้คุณเข้าถึงไฟล์ OverlayState ที่เกี่ยวข้องกับไฟล์ BuildContext.

ต่อไปนี้คือตัวอย่างวิธีที่คุณอาจใช้ Overlay.of เพื่อเข้าถึง OverlayState:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Overlay.of Example'),  
     ),  
      body: Center(  
        child: ElevatedButton(  
          onPressed:() {  
            OverlayState overlayState = Overlay.of(context);  
            OverlayEntry overlayEntry = OverlayEntry(  
              builder:(BuildContext context) {  
                return Positioned(  
                  top: 100,  
                  left: 50,  
                  child: Container(  
                    width: 100,  
                    height: 100,  
                    color: Colors.blue,  
                 ),  
               );  
              },  
           );  
            overlayState.insert(overlayEntry);  
          },  
          child: Text('Show Overlay'),  
       ),  
     ),  
   );  
  }  
}  

ในตัวอย่างนี้ เมื่อ กด ปุ่ม Overlay.of จะใช้วิธีเรียกข้อมูลที่ OverlayState เชื่อมโยงกับปัจจุบัน BuildContext An OverlayEntry จะถูกสร้างขึ้นและเพิ่มเข้าไปโดย overlay ใช้ insert วิธีการของ OverlayState. ซึ่งจะแสดงคอนเทนเนอร์สีน้ำเงินในตำแหน่งเฉพาะที่ด้านบนของวิดเจ็ตอื่นๆ

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

หากมีการอัปเดตหรือการเปลี่ยนแปลงใดๆ ที่เกี่ยวข้อง Overlay.of หลังจากการอัปเดตครั้งล่าสุดของฉัน ฉันขอแนะนำให้ตรวจสอบ Flutter เอกสารประกอบสำหรับข้อมูลล่าสุด