วิธีการใช้ทางลัดแป้นพิมพ์ใน Flutter ด้วย CallbackShortcuts และ Back4App

บทนำ การใช้คีย์ลัดช่วยเพิ่มประสบการณ์ของผู้ใช้โดยการให้การเข้าถึงการกระทำทั่วไปภายในแอปพลิเคชันได้อย่างรวดเร็ว ใน flutter, callbackshortcuts วิดเจ็ตช่วยให้นักพัฒนาสามารถแมพการรวมกันของคีย์บอร์ดโดยตรงกับฟังก์ชันการเรียกกลับโดยไม่ต้องกำหนดการกระทำหรือเจตนา นี่ช่วยทำให้กระบวนการเพิ่มคีย์ลัดในแอปของคุณง่ายขึ้น ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการรวม callbackshortcuts เข้ากับแอปพลิเคชัน flutter และใช้ back4app—บริการแบ็คเอนด์ที่ขับเคลื่อนโดย parse server—เพื่อจัดเก็บและเรียกคืนข้อมูล เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอป flutter ที่ตอบสนองต่อคีย์ลัดเพื่อทำการกระทำเช่นการดึงข้อมูลจาก back4app ข้อกำหนดเบื้องต้น เพื่อให้เสร็จสิ้นบทเรียนนี้ คุณจะต้องมี flutter sdk ติดตั้งบนเครื่องของคุณ ทำตาม คู่มือการติดตั้ง flutter อย่างเป็นทางการ https //flutter dev/docs/get started/install สำหรับระบบปฏิบัติการของคุณ ความรู้พื้นฐานเกี่ยวกับ flutter และ dart หากคุณเป็นมือใหม่ใน flutter ให้ตรวจสอบ เอกสาร flutter https //flutter dev/docs เพื่อทำความคุ้นเคยกับพื้นฐาน ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ parse server sdk สำหรับ flutter เพิ่มเข้าไปในโปรเจกต์ของคุณ เรียนรู้วิธีการตั้งค่าโดยทำตาม คู่มือ back4app flutter sdk https //www back4app com/docs/flutter/parse flutter sdk คีย์บอร์ดจริงหรืออีมูเลเตอร์ เพื่อทดสอบคีย์ลัด ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ flutter 1 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create callback shortcuts app ไปที่ไดเรกทอรีของโปรเจกต์ cd callback shortcuts app 1 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ ขั้นตอนที่ 2 – การตั้งค่า back4app 2 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" ใส่ชื่อสำหรับแอปพลิเคชันของคุณ เช่น "callbackshortcutsapp" , และคลิก "สร้าง" 2 2 ตั้งค่ารูปแบบข้อมูล ในแดชบอร์ดแอปพลิเคชันของคุณ ให้ไปที่ "database" ส่วน คลิกที่ "create a class" ในโมดัล เลือก "custom" ป้อน "item" เป็นชื่อคลาส คลิก "create class" 2 3 เพิ่มคอลัมน์ในคลาส ในคลาส "item" คลิกที่ "+" เพื่อเพิ่มคอลัมน์ใหม่ เพิ่มคอลัมน์ต่อไปนี้ ชื่อ พิมพ์ string คำอธิบาย พิมพ์ string เพิ่มข้อมูลตัวอย่างบางอย่างไปยัง "item" คลาส ตัวอย่างเช่น 2 4 รับข้อมูลประจำตัวแอปพลิเคชัน ไปที่ app settings > security & keys จดบันทึก application id และ client key ขั้นตอนที่ 3 – การเริ่มต้น parse ในแอป flutter ของคุณ เปิด lib/main dart และแก้ไขตามนี้ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'callback shortcuts app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } แทนที่ 'your application id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 4 – การดึงข้อมูลจาก back4app สร้างไฟล์ใหม่ lib/home page dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class item { final string name; final string description; item(this name, this description); } class homepagestate extends state\<homepage> { list\<item> items = \[]; future\<void> fetchitems() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('item')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { items = apiresponse results! map((data) { final name = data get\<string>('name') ?? ''; final description = data get\<string>('description') ?? ''; return item(name, description); }) tolist(); }); } else { print('error fetching data ${apiresponse error? message}'); } } @override void initstate() { super initstate(); fetchitems(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('callback shortcuts app'), ), body items isempty ? center(child circularprogressindicator()) listview\ builder( itemcount items length, itembuilder (context, index) { return listtile( title text(items\[index] name), subtitle text(items\[index] description), ); }, ), ); } } คำอธิบาย คลาส item คลาสโมเดลเพื่อแทนรายการที่ดึงมาจาก back4app fetchitems() ดึงข้อมูลจาก คลาส item ใน back4app และอัปเดต รายการ build() แสดงรายการของรายการหรือแสดงตัวบ่งชี้การโหลดหากข้อมูลยังถูกดึงอยู่ ขั้นตอนที่ 5 – การนำ callbackshortcuts ไปใช้ ตอนนี้ มาลองเพิ่มทางลัดคีย์บอร์ดเพื่อรีเฟรชข้อมูลและนำทางผ่านรายการกันเถอะ 5 1 เพิ่ม focus และ callbackshortcuts widgets แก้ไข build() ใน home page dart @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('callback shortcuts app'), ), body focus( autofocus true, child callbackshortcuts( bindings { singleactivator(logicalkeyboardkey keyr, control true) () { fetchitems(); scaffoldmessenger of(context) showsnackbar( snackbar(content text('data refreshed')), ); }, singleactivator(logicalkeyboardkey arrowdown) () { focusnextitem(); }, singleactivator(logicalkeyboardkey arrowup) () { focuspreviousitem(); }, }, child items isempty ? center(child circularprogressindicator()) listview\ builder( itemcount items length, itembuilder (context, index) { return focusableactiondetector( child listtile( title text(items\[index] name), subtitle text(items\[index] description), ), ); }, ), ), ), ); } คำอธิบาย focus widget ห่อหุ้มเนื้อหาเพื่อให้แน่ใจว่าสามารถรับโฟกัสและเหตุการณ์จากแป้นพิมพ์ได้ callbackshortcuts แมพแป้นพิมพ์ลัดไปยังฟังก์ชัน callback ctrl + r รีเฟรชข้อมูลโดยการเรียก fetchitems() arrow down ย้ายโฟกัสไปยังรายการถัดไป arrow up ย้ายโฟกัสไปยังรายการก่อนหน้า focusableactiondetector ทำให้แต่ละ listtile สามารถโฟกัสได้เพื่อการนำทางด้วยแป้นพิมพ์ 5 2 การนำฟังก์ชันการนำทางไปใช้ เพิ่มวิธีการต่อไปนี้เพื่อจัดการการนำทางรายการ void focusnextitem() { final focus = focusscope of(context); if (focus canrequestfocus) { focus nextfocus(); } } void focuspreviousitem() { final focus = focusscope of(context); if (focus canrequestfocus) { focus previousfocus(); } } ขั้นตอนที่ 6 – การทดสอบแป้นพิมพ์ลัด 6 1 เรียกใช้แอป ในเทอร์มินัลของคุณ ให้รัน flutter run 6 2 ทดสอบการใช้ทางลัด refresh กด ctrl + r (หรือ cmd + r บน macos) ขณะที่แอปกำลังทำงาน คุณควรเห็นข้อความ snackbar ที่บอกว่า "ข้อมูลถูกรีเฟรช" รายการควรอัปเดตหากมีการเปลี่ยนแปลงในข้อมูล 6 3 ทดสอบการใช้ทางลัด navigation ใช้ ปุ่มลูกศรลง และ ปุ่มลูกศรขึ้น เพื่อเลื่อนดูรายการ คุณควรเห็นการเคลื่อนที่ของโฟกัสไปยังรายการต่างๆ บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการใช้ทางลัดคีย์บอร์ดในแอปพลิเคชัน flutter โดยใช้ callbackshortcuts คุณได้รวม back4app เพื่อดึงและแสดงข้อมูล และปรับปรุงประสบการณ์ผู้ใช้โดยอนุญาตให้ผู้ใช้โต้ตอบกับแอปโดยใช้ทางลัดคีย์บอร์ด ข้อสรุปสำคัญ callbackshortcuts ทำให้การเพิ่มคีย์บอร์ดช็อตคัตง่ายขึ้นโดยการแมพการรวมคีย์โดยตรงไปยังฟังก์ชันคอลแบ็ก การจัดการโฟกัส จำเป็นสำหรับวิดเจ็ตในการรับเหตุการณ์จากคีย์บอร์ด การรวม back4app ให้บริการแบ็กเอนด์ที่สามารถขยายได้เพื่อเก็บและเรียกคืนข้อมูล ขั้นตอนถัดไป ขยายช็อตคัต เพิ่มช็อตคัตคีย์บอร์ดเพิ่มเติมเพื่อฟังก์ชันการทำงานที่มากขึ้น ตัวปรับแต่งเฉพาะแพลตฟอร์ม จัดการความแตกต่างในคีย์ปรับแต่งระหว่างแพลตฟอร์ม (เช่น control vs command) การเข้าถึง ตรวจสอบให้แน่ใจว่าแอปของคุณสามารถเข้าถึงได้โดยการสนับสนุนการนำทางด้วยคีย์บอร์ดและโปรแกรมอ่านหน้าจอ การจัดการข้อผิดพลาด ปรับปรุงการจัดการข้อผิดพลาดเมื่อดึงข้อมูลจาก back4app แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs คู่มือ parse sdk สำหรับ flutter https //docs parseplatform org/flutter/guide/ เอกสารทางการ flutter https //flutter dev/docs callbackshortcuts widget https //api flutter dev/flutter/widgets/callbackshortcuts class html เขียนโค้ดให้สนุก!