หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

กระพือ

  • การแนะนำ

อะไร

  • เฟรมทำงาน
  • โอเพ่นซอร์ส
  • แอปพลิเคชั่นแบบหลายแผ่นจาก codebase เดี่ยว (ข้าม pateform)

ทำไมต้องใช้ Flutter

Flutter เปลี่ยนกระบวนการพัฒนาแอพ สร้างทดสอบและปรับใช้มือถือที่สวยงามเว็บเดสก์ท็อปและแอพที่ฝังตัวจาก codebase เดียว

ใครพัฒนา

  • พัฒนาโดย Google
  • เปิดตัวในปี 2558
  • เปิดตัวในปี 2560

การติดตั้ง

การตั้งค่า envoirement

  • เปิดจานคำสั่ง -

  • Shift+CMD+P บน Mac OS

  • Shift+Ctrl+P บน Windows

  • พิมพ์โครงการใหม่ Flutter

  • เลือกโปรเจ็กต์ใหม่ Flutter

  • เลือกแอปพลิเคชัน

  • เลือกเส้นทางโครงการที่คุณต้องการวางโครงการของคุณ

  • ป้อนชื่อโครงการของคุณ

  • กด Enter

Ooooo ... เสร็จแล้ว

  • คุณสามารถทำอะไรก็ได้ที่นี่ที่คุณต้องการในโครงการของคุณ
  • ที่นี่หมายถึง lib/main.dart ## ภายใต้โฟลเดอร์ lib main.dart พร้อมใช้งาน

แอป First Flutter

คัดลอกวางจากเอกสารอย่างเป็นทางการติดตาม URL? https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

ปุ่มเพิ่ม

ElevatedButton (onpressed: () {
พิมพ์ ('กดปุ่มถัดไป'); }, เด็ก: ข้อความ ('ถัดไป'),),),

หลัก () หรือฟังก์ชั่นหลัก

เพียงแค่บอกให้ใช้แอป Flutter ที่กำหนดไว้ในฟังก์ชั่น myfunction () เช่น เป็นโมฆะ Main () {runapp (myfunction ()); -

วิดเจ็ตเป็นองค์ประกอบที่คุณสร้างแอพพลิเคชั่น Flutter ทุกตัว

อย่างที่คุณเห็นแม้แต่แอพเองก็เป็นวิดเจ็ต

อดีต. 1. StatetelessWidget 2. statefulwidget

Class MyApp () { #จุดเริ่มต้นของแอปของคุณ

-

  • MyAppState # กำหนดสถานะของแอปของคุณ

  • MyAppState # กำหนดข้อมูลที่แอปต้องใช้งาน ตอนนี้มันมีตัวแปรเดียวกับคู่คำสุ่ม - - ปัจจุบัน คุณจะเพิ่มในภายหลัง

  • ผู้เปลี่ยนแปลง

  • วิธีจัดการสถานะแอพใน Flutter วิธี Maney Powefull นั้นเป็นสิ่งที่น่าสนใจ

  • ระดับรัฐขยาย Changenotifier ซึ่งหมายความว่าสามารถแจ้งผู้อื่นเกี่ยวกับการเปลี่ยนแปลงของตัวเอง

  • วิดเจ็ตทุกตัวกำหนดวิธีการสร้าง () ที่เรียกว่าโดยอัตโนมัติทุกครั้งที่สถานการณ์ของวิดเจ็ตเปลี่ยนแปลงเพื่อให้วิดเจ็ตทันสมัยอยู่เสมอ

  • MyHomePage ติดตามการเปลี่ยนแปลงสถานะปัจจุบันของแอปโดยใช้วิธีการดู

  • Scaffold (): # มันเป็นวิดเจ็ตที่เป็นประโยชน์และพบได้ในแอพพลิเคชั่น Flutter ในโลกแห่งความเป็นจริงส่วนใหญ่

  • คอลัมน์ (): # เป็นหนึ่งในวิดเจ็ตเลย์เอาต์พื้นฐานที่สุดใน Flutter

  • WordPair # มีผู้ที่มีประโยชน์หลายรายเช่น Aspascalcase หรือ Assnakecase ที่นี่เราใช้ Aslowercase

การจัดรูปแบบรหัสกระพือ

https://docs.flutter.dev/development/tools/Formatting

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

  • getNext ()
  • สิ่งที่เหลืออยู่คือการโทรหาวิธี getNext จากการโทรกลับของปุ่ม
  • ทำให้แอพสวยขึ้น
  • แยกวิดเจ็ต
  • บรรทัดที่รับผิดชอบในการแสดงคู่คำปัจจุบันดูเหมือนว่าตอนนี้: text (appstate.current.aslowercase) หากต้องการเปลี่ยนเป็นสิ่งที่ซับซ้อนกว่านี้เป็นความคิดที่ดีที่จะแยกสายนี้ออกเป็นวิดเจ็ตแยกต่างหาก การมีวิดเจ็ตแยกต่างหากสำหรับชิ้นส่วนตรรกะแยกต่างหากของ UI ของคุณเป็นวิธีที่สำคัญในการจัดการความซับซ้อนในการกระพือ

เพิ่มการ์ด

ผู้สร้างใหม่

สารสกัด

  • เลือกข้อความคลิกที่ Refactor
  • คลิกที่วิดเจ็ต Extract
  • ป้อนชื่อวิดเจ็ต
  • คลาสจะถูกสร้างขึ้นเป็นชื่อที่คุณป้อน

การขยาย

  • เลือกข้อความ
  • คลิกขวา
  • เลือก Refactor
  • เลือก Wrap ด้วย padding
  • กด Enter

// หมายเหตุ: Flutter ใช้องค์ประกอบมากกว่าการสืบทอดทุกครั้งที่ทำได้ ที่นี่แทนที่จะเป็นช่องว่างภายในเป็นคุณลักษณะของข้อความมันเป็นวิดเจ็ต!

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

ธีมและสไตล์

ฟังก์ชั่น

  1. เลือกวิดเจ็ตเลย์เอาต์
  2. วิดเจ็ตที่มองเห็นได้ (ข้อความ, รูปภาพ, ไอคอน)
  3. เพิ่มวิดเจ็ตที่มองเห็นได้ในวิดเจ็ตเลย์เอาต์
  4. แอพวัสดุ
  5. แอพที่ไม่ใช่วัสดุ

งานทำ

  • สร้างเค้าโครง
  • เพิ่มรูปภาพ
  • เพิ่มชื่อเรื่อง
  • เพิ่มคำบรรยาย
  • เพิ่มเช่นไอคอนการจัดอันดับ
  • เพิ่มไอคอนการโทร
  • เพิ่มป้ายกำกับ
  • เพิ่มไอคอนเส้นทาง
  • เพิ่มป้ายกำกับ
  • เพิ่มไอคอนแชร์
  • เพิ่มป้ายกำกับ
  • เพิ่มข้อความ (discription)

การสร้างแอพที่ตอบสนองและปรับตัวได้

  • LayoutBuilder Class 'สร้างทรีวิดเจ็ตที่สามารถขึ้นอยู่กับขนาดของวิดเจ็ตพ่อแม่'

  • Aspectratio ('วิดเจ็ตที่พยายามปรับขนาดเด็กให้เป็นอัตราส่วนเฉพาะ')

  • CustomsinglechildLayout ('วิดเจ็ตที่ปกป้องเค้าโครงของลูกเดี่ยวให้เป็นตัวแทน')

  • singlechildlayoutdelegate ('ซึ่งควบคุมเค้าโครงของเด็ก')

  • CustomMultichildLayout ('ซึ่งใช้ตัวแทนเพื่อวางตำแหน่งเด็กหลายคน')

  • FittedBox ('เครื่องชั่งและวางตำแหน่งลูกของมันภายในตัวเองตามพอดี')

  • fractionallysizedbox

  • layoutbuilder

  • MediaQuery

  • MediaQueryData

  • Orientationbuilder

วิดเจ็ตเลย์เอาต์

เด็กเลี้ยงเดี่ยว

  • จัดตำแหน่ง- จัดตำแหน่ง- เด็กภายในตัวเอง ต้องใช้ค่าสองเท่าระหว่าง -1 และ 1 สำหรับการจัดแนวแนวตั้งและแนวนอน

  • Aspectratio พยายามที่จะปรับขนาดเด็กให้เป็นอัตราส่วนเฉพาะ

  • ข้อ จำกัด ของบ็อกซ์กำหนดข้อ จำกัด ขนาดให้กับเด็กเสนอการควบคุมขนาดต่ำสุดหรือสูงสุด

  • CustomsingleChildLayout - ใช้ฟังก์ชั่นตัวแทนเพื่อจัดตำแหน่งเด็กคนเดียว ผู้แทนสามารถกำหนดข้อ จำกัด และการวางตำแหน่งของเค้าโครงสำหรับเด็ก

  • ขยายและยืดหยุ่น - อนุญาตให้ลูกของแถวหรือคอลัมน์หดตัวหรือเติบโตเพื่อเติมเต็มพื้นที่ที่มีอยู่

  • FractionallySizedBox - ขนาดลูกของมันเป็นเศษเสี้ยวของพื้นที่ว่าง

  • Layoutbuilder - สร้างวิดเจ็ตที่สามารถรีดกลับมาตามขนาดของผู้ปกครอง

  • SingleChildScrollView - เพิ่มการเลื่อนให้กับเด็กคนเดียว มักใช้กับแถวหรือคอลัมน์

หลายครั้ง

  • คอลัมน์แถวและเฟล็ก - ปล่อยเด็กออกมาในแนวนอนหรือแนวตั้งเดียว ทั้งคอลัมน์และแถวขยายวิดเจ็ต Flex

  • CustomMultichildLayout - ใช้ฟังก์ชั่นตัวแทนเพื่อวางตำแหน่งเด็กหลายคนในระหว่างขั้นตอนเลย์เอาต์

  • การไหล - คล้ายกับ CustomMultichildlayout แต่มีประสิทธิภาพมากกว่าเพราะดำเนินการในระหว่างเฟสสีแทนที่จะเป็นเฟสเลย์เอาต์

  • ListView, GridView และ CustomscrollView - จัดทำรายการเด็กที่เลื่อนได้

  • สแต็ก - เลย์และตำแหน่งเด็กหลายคนเมื่อเทียบกับขอบของสแต็ค ฟังก์ชั่นคล้ายกับตำแหน่งที่กำหนดใน CSS

  • ตาราง - ใช้อัลกอริทึมเลย์เอาต์ตารางคลาสสิกสำหรับเด็ก ๆ รวมกันหลายแถวและคอลัมน์

  • Wrap - แสดงลูก ๆ ในแนวนอนหรือแนวตั้งที่หลากหลาย

  • แอนิเมชั่น 'บล็อกการสร้างหลักของระบบแอนิเมชั่นคือคลาสแอนิเมชัน ภาพเคลื่อนไหวแสดงถึงค่าของประเภทเฉพาะที่สามารถเปลี่ยนแปลงตลอดอายุการใช้งานของภาพเคลื่อนไหว วิดเจ็ตส่วนใหญ่ที่ทำงานอนิเมชั่นจะได้รับวัตถุแอนิเมชั่นเป็นพารามิเตอร์ซึ่งพวกเขาอ่านค่าปัจจุบันของภาพเคลื่อนไหวและที่พวกเขาฟังการเปลี่ยนแปลงค่านั้น '

  • AddListener 'เมื่อใดก็ตามที่ค่าของภาพเคลื่อนไหวเปลี่ยนไปภาพเคลื่อนไหวจะแจ้งให้ผู้ฟังทั้งหมดเพิ่มเข้ามาด้วย addListener โดยทั่วไปวัตถุสถานะที่รับฟังการโทรแบบแอนิเมชั่น setState อยู่ในการโทรกลับผู้ฟังเพื่อแจ้งระบบวิดเจ็ตว่าจำเป็นต้องสร้างใหม่ด้วยค่าใหม่ของภาพเคลื่อนไหว -

  • AnimatedWidget 'มีประโยชน์มากที่สุดสำหรับวิดเจ็ตภาพเคลื่อนไหวไร้สัญชาติ'

  • AnimatedBuilder 'มีประโยชน์สำหรับวิดเจ็ตที่ซับซ้อนมากขึ้นซึ่งต้องการรวมแอนิเมชั่นเป็นส่วนหนึ่งของฟังก์ชั่นการสร้างขนาดใหญ่'

  • แอนิเมชั่นของ AddstatusListener ยังมีแอนิเมชั่นสตาทัสซึ่งบ่งชี้ว่าภาพเคลื่อนไหวจะพัฒนาไปอย่างไรเมื่อเวลาผ่านไป -

  • AnimationController ''

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด