ตัวเลือกสี Flutter ที่ปรับแต่งได้สูง
Flex ColorPicker
Flex ColorPicker คือตัวเลือกสีที่กำหนดค่าได้สำหรับ Flutter |_+_| สามารถแสดงเครื่องมือเลือกสีต่างๆ ได้ตั้งแต่ 1 ถึง 6 แบบที่คุณสามารถใช้เลือกสีได้
ตัวเลือกการเลือกสีที่แตกต่างกันคือ:
- วัสดุหลัก สีและเฉดสี |_+_|
- สีเน้นวัสดุและเฉดสี |_+_|
- วัสดุหลักและสีเน้นเสียงและเฉดสีในตัวเลือกสีเดียวกัน |_+_|
- สีดำและสีขาว รวมทั้งเฉดสีใกล้สีดำและใกล้สีขาว |_+_|
- วัสดุที่กำหนดเองเช่นสีและเฉดสีที่คุณกำหนดและตั้งชื่อ |_+_|
- ตัวเลือกวงล้อสี HSV ที่ให้คุณเลือกสีใดก็ได้ สีหลักของวัสดุ เช่น เฉดสีสำหรับสีที่เลือกจะถูกคำนวณโดยอัตโนมัติ |_+_|
เมื่อคุณแสดงเครื่องมือการเลือกตัวอย่างสีมากกว่าหนึ่งรายการ แถบเลื่อนจะช่วยให้คุณเลือกได้ว่าจะใช้เครื่องมือใด คุณสามารถกำหนดค่าตัวเลือกสีเพื่อรวมตัวอย่างสีด้านบน การแสดงตัวเลือกที่ 1 และ 2 ร่วมกับตัวเลือกที่ 3 นั้นไม่ค่อยมีประโยชน์ โดยมีให้เลือกใช้เป็นทางเลือกในการแสดงสีหลักและสีเฉพาะจุดของวัสดุ
คุณระบุหัวเรื่องและหัวเรื่องย่อยให้กับตัวเลือก ซึ่งมักจะเป็นวิดเจ็ตข้อความที่มีสไตล์ที่เหมาะสม คุณยังกำหนดว่าสามารถเลือกเฉดสีวัสดุได้หรือไม่ และแสดงชื่อสีและค่าที่เลือกไว้ในตัวเลือกหรือไม่ หากค่าแสดงขึ้น ตัวเลือกจะมีปุ่มที่อนุญาตให้คุณคัดลอกรหัสสีที่เลือกไปยังคลิปบอร์ด
รูปร่าง ขนาด และระยะห่างของรายการตัวเลือกสีสามารถแก้ไขได้ มีไดอะล็อกในตัวที่สามารถใช้เพื่อแสดง ColorPicker ในไดอะล็อกที่สร้างไว้ล่วงหน้า แต่คุณสามารถสร้างไดอะล็อกของคุณเองได้ และใช้ ColorPicker ในไดอะล็อกที่คุณกำหนดเอง ตัวอย่างด้านล่างแสดงรูปแบบต่างๆ ของ ColorPicker
เริ่มต้น
ใน |_+_| ของคุณ กระพือปีก โครงการเพิ่มการพึ่งพาต่อไปนี้:
ColorPickerในไฟล์ไลบรารีของคุณให้เพิ่มการนำเข้าต่อไปนี้:
ColorPickerSwatch.materialตัวอย่างการสมัคร
หากต้องการลองใช้ตัวอย่างพื้นฐานของ ColorPicker บนอุปกรณ์หรือโปรแกรมจำลอง ให้โคลนที่เก็บ ColorPicker และเรียกใช้ตัวอย่าง:
ColorPickerSwatch.accentผลลัพธ์คือตัวเลือกเริ่มต้นพื้นฐานและตัวเลือกอื่นที่เปิดขึ้นในกล่องโต้ตอบ โดยมีตัวเลือกเพิ่มเติมสองสามตัว
ที่อยู่กระเป๋าสตางค์เหรียญปาสกาล
ตัวอย่างเว็บสด
คุณยังสามารถลองใช้ตัวอย่างเว็บสดของ ColorPicker ที่นี่ . ด้วยการสาธิตบนเว็บ คุณสามารถแก้ไขค่า API ส่วนใหญ่ของ ColorPicker และใช้เป็นเครื่องมือในการค้นหาการตั้งค่าและสไตล์ที่คุณชอบและเหมาะกับแอปพลิเคชันของคุณ
มีซอร์สโค้ดสำหรับการสาธิตเว็บ ซึ่งเป็นเพียงตัวอย่างที่ซับซ้อนกว่าตัวอย่างพื้นฐานที่มาพร้อมกับแพ็คเกจเล็กน้อย ที่นี่ .
ข้อมูลเบื้องต้นเกี่ยวกับ ColorPicker
กำหนด |_+_| และกำหนดให้เป็นค่าเริ่มต้นใน |_+_| ปกติ
ColorPickerSwatch.bothเพิ่ม |_+_| ในวิธีการ build ของคุณ เช่น อาจอยู่ใน |_+_| หรือ |_+_| ให้มันเป็นสีเริ่มต้น a |_+_| และ |_+_| บวกด้วย |_+_| . ที่จำเป็น ฟังก์ชั่นโทรกลับ ใช้สีจากการโทรกลับใน |_+_| เพื่อแก้ไข |_+_| เป็นสีที่เลือกในตัวเลือกสี
ColorPickerSwatch.bwผลลัพธ์จะมีลักษณะดังนี้:
หากต้องการ คุณสามารถเปลี่ยนรูปแบบและขนาดของรายการหยิบได้ มาทำให้เป็นวงกลมกันเถอะ:
ColorPickerSwatch.customคุณสามารถใช้เหมือนกัน |_+_| วิดเจ็ตที่ |_+_| ใช้ภายในเป็นตัวบ่งชี้สี ที่นี่เราใช้ใน |_+_| เป็นคุณสมบัติต่อท้ายเพื่อแสดงสีที่เลือก |_+_| รวมถึง |_+_| ที่คุณสามารถใช้เพื่อแสดงชื่อของสีวัสดุมาตรฐานและค่าดัชนีเฉดสีได้ นอกจากนี้ยังสามารถส่งคืนรหัสสี Hex สไตล์ Flutter เราใช้มันใน |_+_| |_+_| คุณสมบัติเพื่ออธิบายสีที่เลือก
ColorPickerSwatch.anyการตั้งค่านี้ส่งผลให้รายการเลือกสีกลมและตัวบ่งชี้แยกต่างหากสำหรับสีที่เลือก:
ฉันจะต่ออายุการสมัครสมาชิก mcafee ด้วยรหัสผลิตภัณฑ์ได้อย่างไร
ColorPicker เป็นไดอะล็อก
กรณีการใช้งานทั่วไปสำหรับตัวเลือกสีคือการแสดงวิดเจ็ตการเลือกสี และอนุญาตให้ผู้ใช้เลือกสีใหม่ในกล่องโต้ตอบหรือยกเลิกการเลือกสี |_+_| มาพร้อมกับไดอะล็อกในตัวที่สามารถใช้สำหรับสิ่งนี้ หรือคุณสามารถใช้ |_+_| Widget เพื่อสร้างไดอะล็อกของคุณเองตามนั้น
สำหรับตัวอย่างกล่องโต้ตอบ เราจะแสดงตัวเลือกเพิ่มเติมในตัวเลือกและเพิ่มสีที่กำหนดเองให้กับ กำหนดเอง ส่วนสีของ |_+_|
ขั้นแรก เรากำหนดสีที่กำหนดเอง และจากคำจำกัดความสีเดียว เราสร้างตัวอย่างสีหลักและสีเฉพาะจุดโดยใช้ |_+_| หรืออีกทางหนึ่ง |_+_| สำหรับแถบสีเฉพาะจุดของสีที่กำหนดไว้ จากนั้นเราก็เพิ่มตัวอย่างสีเหล่านี้ใน |_+_| แผนที่ ที่เราจับคู่กับชื่อของเราเองสำหรับตัวอย่างสี
pubspec.yamlนอกจากนี้เรายังสร้าง |_+_| จากทั้งหมด |_+_| ค่า enum เป็นค่าบูลีน ซึ่งกำหนดตัวอย่างที่เราต้องการแสดงใน |_+_| ในตัวอย่างด้านล่าง เราได้รวมวัสดุหลัก การเน้นเสียง และสีที่กำหนดเองด้านบน รวมทั้งวงล้อสี HSV ที่ช่วยให้เราเลือกสีใดก็ได้ เราไม่ได้รวมตัวเลือกที่รวมสีหลักและสีเฉพาะจุดไว้ในตัวเลือกเดียวกัน และเราไม่แสดงตัวเลือกสีดำและสีขาวและตัวเลือกเฉดสีดำที่ใกล้และสีขาว
dependencies: ... flex_color_picker: เราเพิ่มตัวแปรสำหรับกล่องโต้ตอบที่เราเลือกสี |_+_| และตั้งค่าเริ่มต้นสำหรับมัน
import 'package:flex_color_picker/color_picker.dart'; เราใช้ |_+_| . อื่น เพื่อแสดง |_+_| ที่เรากำหนดรูปแบบแตกต่างกันเล็กน้อยในกรณีนี้ นอกจากนี้เรายังใช้ |_+_| โทรกลับเพื่อเปิดกล่องโต้ตอบกับ |_+_| อื่น ก่อนที่เราจะเปิดไดอะล็อก เราจะเก็บ |_+_| . ปัจจุบัน สีที่เราตั้งใจจะเปลี่ยนด้วยกล่องโต้ตอบ วิธีนี้ทำให้เราสามารถคืนค่าสีนี้ได้หากผู้ใช้ยกเลิกกล่องโต้ตอบ
cd example/ flutter run --release |_+_| เป็นฟังก์ชันบูลีนแบบอะซิงโครนัสที่ส่งคืน |_+_| ถ้าผู้ใช้ปิดตัวเลือกไดอะล็อกด้วยปุ่ม เลือก ปุ่ม. ถ้า ยกเลิก ถูกเลือกหรือผู้ใช้ปิดกล่องโต้ตอบโดยคลิกที่ด้านนอก |_+_| จะถูกส่งกลับ
Colorตัวอย่างข้างต้นใช้คุณสมบัติการจัดสไตล์อีกสองสามอย่าง แต่ที่สำคัญที่สุดคือใช้ |_+_| วิธีการแสดง |_+_| . ที่กำหนดไว้ ในกล่องโต้ตอบ กล่องโต้ตอบจำเป็นต้องมีบริบท เราจึงส่งต่อไปยังกล่องโต้ตอบนั้น
เรายังกำหนดข้อจำกัดด้านขนาดสำหรับไดอะล็อก หากคุณไม่ได้กำหนดข้อจำกัดด้านขนาด ระบบจะกำหนดขนาดอัตโนมัติเพื่อให้พอดีกับเนื้อหาในกล่องโต้ตอบ การใช้ข้อจำกัดช่วยให้ไดอะล็อกคงขนาดเดิมไว้เมื่อขนาดเนื้อหาเปลี่ยนแปลงเล็กน้อยเมื่อคุณสลับไปมาระหว่างตัวเลือกประเภทต่างๆ ที่คุณเปิดใช้งาน จะดูดีกว่าถ้าขนาดกล่องโต้ตอบไม่เปลี่ยนแปลงเมื่อคุณสลับประเภทตัวเลือกด้วยตัวเลือก ตัวเลือกวงล้อสีโดยเฉพาะอย่างยิ่งมักจะต้องใช้พื้นที่เพิ่มขึ้นเล็กน้อย สามารถปรับแต่งขนาดล้อได้เช่นกัน แต่การใช้งานด้วยการสัมผัสจะยากขึ้นและแม่นยำน้อยลงหากมีขนาดเล็กมาก
ผลลัพธ์สุดท้ายของการตั้งค่าข้างต้นคือ |_+_| โดยสามารถคลิกวิดเจ็ตตัวบ่งชี้สีต่อท้ายเพื่อเปิดกล่องโต้ตอบเพื่อเลือกสีใหม่สำหรับส่วนท้าย |_+_| สี.
ในฐานะที่เป็น |_+_| สีจะเปลี่ยนไปในกล่องโต้ตอบ สีของ |_+_| ก็เปลี่ยนแบบโต้ตอบด้วย หากการเลือกถูกยกเลิก |_+_| กลับเป็นสีเดิม
เป็นแบบฝึกหัดเพิ่มเติม ลองเชื่อมต่อ |_+_| คุณค่าของ |_+_| ของ |_+_| คุณสมบัติ. คุณทำได้สำเร็จหรือไม่? เกิดอะไรขึ้น?
StatefulWidgetดังที่เห็นด้านล่าง ตอนนี้สีที่เลือกในกล่องโต้ตอบจะเปลี่ยนสีของ |_+_| เมื่อคุณเลือกสีในกล่องโต้ตอบและการยกเลิกจะเป็นการคืนค่าสีของแถบแอปด้วย สวยเย็น!
ubx coin คืออะไร
คุณสามารถเชื่อมต่อสีกับสีของชุดรูปแบบและแก้ไขค่าสีของชุดรูปแบบของแอปพลิเคชันแบบโต้ตอบได้เช่นกัน แต่จะเกินขอบเขตของตัวอย่างนี้
ขุดให้ลึกขึ้น
บทนำข้างต้นเป็นการแนะนำตัวอย่างแบบรวม โปรดดูส่วนตัวอย่างสำหรับซอร์สโค้ดที่สมบูรณ์
มีตัวเลือกการกำหนดค่าเพิ่มเติมสำหรับ |_+_| ใช้คู่มืออ้างอิง API สำหรับข้อมูลเพิ่มเติม แถมยังเรียนให้ครบอีกด้วย ตัวอย่างเว็บสด และมัน รหัสแหล่งที่มา .
ดาวน์โหลดรายละเอียด:
ผู้เขียน: rydmike
รหัสแหล่งที่มา: https://github.com/rydmike/flex_color_picker
#กระพือ #โผ #mobile-apps