ดาวน์โหลด timeline_list - ดาวน์โหลดซอร์สโค้ด timeline

timeline_list

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

วิดเจ็ตไทม์ไลน์ของ Flutter

วิดเจ็ต flutter ที่ปรับแต่งได้สูงสำหรับการแสดงระยะเวลาแนวตั้งด้วยเครื่องหมายที่กำหนดเองไอคอนและตัวเลือกการวางตำแหน่งที่ยืดหยุ่น

ภาพหน้าจอ Timeline Flutter

คำเตือน

- เอกสารถูกสร้างขึ้นโดยใช้ LLMS หากคุณสังเกตเห็นข้อผิดพลาดหรือการพิมพ์ผิดโปรดส่งคำขอดึงหรือสร้างปัญหา

คุณสมบัติ

สามตำแหน่งไทม์ไลน์: start (ซ้าย), center หรือ end (ขวา)
- เครื่องหมายที่ปรับแต่งได้อย่างสมบูรณ์พร้อมวิดเจ็ตใด ๆ เป็นเนื้อหาหรือไอคอน
- การจัดตำแหน่งไอคอนที่ยืดหยุ่น: top center หรือ bottom ของเครื่องหมาย
การวางตำแหน่งเครื่องหมายแต่ละตัวสำหรับระยะเวลาที่อยู่ตรงกลาง
สนับสนุนคำสั่งซื้อไทม์ไลน์ที่ย้อนกลับ
ฟิสิกส์เลื่อนเลื่อนที่กำหนดเองและการสนับสนุนคอนโทรลเลอร์

การติดตั้ง

เพิ่มสิ่งนี้ลงในไฟล์ pubspec.yaml ของแพ็คเกจของคุณ:

 dependencies :
  timeline_list : ^0.1.0

การใช้งาน

ไทม์ไลน์ง่ายๆ

ภาพหน้าจอ Timeline Flutter Simple

 import 'package:timeline_list/timeline_list.dart' ;

Timeline (
  children : [
    Marker (child : Text ( "Step 1" )),
    Marker (child : Text ( "Step 2" )),
    Marker (child : Text ( "Step 3" ))
  ],
)

ตัวอย่าง onboarding

นี่คือตัวอย่างขั้นสูงที่แสดงไทม์ไลน์ onboarding พร้อมไอคอนที่กำหนดเอง:

Flutter Onboarding Timeline Screenshot

 var checkIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .green),
    child : Icon ( Icons .check, color : Colors .white, size : 12 ));
var emptyIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .grey));
return Scaffold (
    appBar : AppBar (title : const Text ( "Onboarding example" )),
    body : Column (children : [
      Timeline . builder (
        context : context,
        markerCount : 10 ,
        properties : TimelineProperties (
            iconAlignment : MarkerIconAlignment .center,
            iconSize : 16 ,
            timelinePosition : TimelinePosition .start),
        markerBuilder : (context, index) => Marker (
          child : Padding (
            padding : const EdgeInsets . all ( 8.0 ),
            child : Text ( "Step ${ index + 1 }" ),
          ),
          icon : index >= 8 ? emptyIcon : checkIcon,
          position : MarkerPosition .left,
        ),
      ),
    ]));

การปรับแต่ง

คุณสมบัติไทม์ไลน์

timelinePosition : ควบคุมตำแหน่งไทม์ไลน์โดยรวม ( start center end )
iconAlignment : ตั้งค่าการจัดตำแหน่งไอคอนที่สัมพันธ์กับเนื้อหาเครื่องหมาย
iconSize : กำหนดขนาดของไอคอนเครื่องหมาย
lineWidth : ตั้งค่าความกว้างของเส้นเชื่อมต่อ
lineColor : ปรับแต่งสีของเส้นเชื่อมต่อ
itemGap : ควบคุมระยะห่างระหว่างเครื่องหมาย
iconGap : ตั้งค่าช่องว่างระหว่างไอคอนและเนื้อหาเครื่องหมาย

คุณสมบัติของเครื่องหมาย

child : วิดเจ็ตเนื้อหาหลักของเครื่องหมาย
icon : วิดเจ็ตไอคอนแบบกำหนดเองเสริม
position : ตำแหน่งเครื่องหมายสำหรับระยะเวลาที่อยู่ตรงกลาง ( left , right )
onTap : การโทรกลับสำหรับกิจกรรมการแตะเครื่องหมาย
maxWidth : ข้อ จำกัด ความกว้างสูงสุดสำหรับเนื้อหาเครื่องหมาย