สร้าง Grid / Table of Aligned Text in Flutter

Damian 2020-05-13 17:17.

G'day!

ฉันต้องการสร้างตารางง่ายๆต่อไปนี้ใน Flutter โดยทั่วไปคอลัมน์ข้อความสองคอลัมน์คอลัมน์ด้านซ้ายจะจัดชิดขวาคอลัมน์ด้านขวาจัดชิดซ้าย แต่ละแถวจัดชิดบนสุดในกรณีที่คอลัมน์ด้านขวามีหลายชื่อ

คอลัมน์ด้านซ้ายควรปรับขนาดโดยอัตโนมัติเป็นขนาดของรายการที่ใหญ่ที่สุด (เนื่องจากจะมีสตริงการแปลสำหรับแต่ละชื่อ) โดยเว้นช่องว่างที่เหลือไว้สำหรับชื่อคอลัมน์ด้านขวา

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

ฉันสามารถสร้างสิ่งนี้ใน c # xaml ได้ใน 2 นาทีโดยใช้ Grid ที่มีนิยาม GridRow และ GridColumn แต่ดูเหมือนจะยากมากใน Flutter ฉันได้ลองใช้ Table, DataTable และ Columns / Rows แล้ว แต่จะไม่มีการจัดแนวแบบนี้

แน่นอนว่านี่เป็นวิธีที่ค่อนข้างธรรมดาในการแสดงข้อมูลใช่หรือไม่?

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก!

ขอบคุณ! เดเมียน

flutter dart flutter-layout

1 answers

Darshan 2020-05-13 21:28.

เราสามารถใช้Tableวิดเจ็ตเพื่อให้ได้ผลลัพธ์ที่ต้องการ

สำหรับคอลัมน์แรกที่จะจัดชิดซ้ายและที่สองจะจัดชิดขวาแม้ว่าฉันจะไม่พบคุณสมบัติ inbuilt ใด ๆ ของTableวิดเจ็ตที่ทำงานให้เราได้ แต่เรายังสามารถใช้ประโยชน์จากContainerวิดเจ็ตและใช้งานpaddingและalignmentทำให้ถูกต้องและ จัดชิดซ้ายตามลำดับสำหรับแต่ละรายการTableRowดังต่อไปนี้:

TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Officers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('Michael')
                  )
                ]),
              ]),
              TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Explorers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('James Smith \nFred Jones')
                  )
                ]),
              ]),

สิ่งนี้จะแสดงผลเป็น:

เพื่อให้แต่ละแถวอยู่ในแนวบนสุดเราจะใช้Table's defaultVerticalAlignment: TableCellVerticalAlignment.topคุณสมบัติดังนั้นในกรณีที่มีค่าหลายค่าในคอลัมน์ด้านขวาแถวนั้นจะอยู่ในแนวบนสุด:

เพื่อให้คอลัมน์ด้านซ้ายเป็นขนาดอัตโนมัติตามข้อมูลในนั้นเราจะใช้columnWidthคุณสมบัติที่ใช้key valueคู่เป็นอินพุตเพื่อแสดงแต่ละแถวในตารางและส่งIntrinsicColumnWidth()ขนาดคอลัมน์ตามขนาดของเนื้อหาดังต่อไปนี้:

columnWidths: {
                  0: IntrinsicColumnWidth(),
                  1: IntrinsicColumnWidth()
                },

สิ่งนี้ทำให้ตารางสมบูรณ์เป็น:

หวังว่านี่จะตอบคำถามของคุณ

Japanese Thai Russian Vietnamese Hindi

MORE COOL STUFF

Jana Duggar: ทุกสิ่งที่เธอพูดเกี่ยวกับความรักและกรอบเวลา 5 ปีของเธอเพื่อค้นหา 'หนึ่ง'

Jana Duggar เปิดใจเกี่ยวกับการค้นหาความรักของเธอ นี่คือทุกสิ่งที่เธอพูดเกี่ยวกับหัวข้อและกรอบเวลา 5 ปีสำหรับการแต่งงาน

2023-06-12.

แซม ฮิวแฮนรู้ดีว่าเขาจะได้อะไรจากฉาก 'Outlander' — 'ฉันรู้สึกเหมือนตัวเองเป็นเจมี่เมื่อใส่มันลงไป'

เมื่อเร็ว ๆ นี้ แซม ฮิวแฮน นักแสดงจากเรื่อง 'Outlander' ได้เปิดเผยสิ่งที่เขาจะทำจากกองถ่ายเพื่อระลึกถึงเจมี เฟรเซอร์ บทบาทที่ทำให้เขากลายเป็นดารา

2023-06-12.

เพลงของบีทเทิลยุคแรกซึ่งเป็นหนึ่งใน 'การแสดงที่น่าตื่นเต้นที่สุด' ของวง อ้างอิงจากวงในของ Fab Four

'She Loves You' เขียนขึ้นในหนึ่งชั่วโมง บันทึกเสียงในหนึ่งวัน และเป็นเพลงของ The Beatles ที่มีการแสดงที่ดีที่สุดเพลงหนึ่งในอาชีพของพวกเขา

2023-06-11.

Dolly Parton ช่วยคุณยายที่ 'ไม่ถูกต้อง' ของเธอ เมื่อไม่มีหลานคนอื่นๆ อยากทำ—เธอก็จะแกล้งเธอด้วย

Dolly Parton และคุณย่า Bessie มีความสัมพันธ์พิเศษ คุณยายพาร์ตันป่วยหนัก แต่นั่นไม่ได้ทำให้ดอลลี่หยุดแกล้งเธอ

2023-06-11.

ต้นกำเนิดของศาสนาอิสลาม: ประวัติศาสตร์ทางศาสนา

ต้นกำเนิดของศาสนาอิสลามย้อนกลับไปได้ถึงต้นศตวรรษที่ 7 บนคาบสมุทรอาหรับ ศาสนาอิสลามเริ่มต้นขึ้นในเมืองเมกกะ ที่ซึ่งชายคนหนึ่งชื่อมูฮัมหมัด พ่อค้าผู้ประสบความสำเร็จจากชนเผ่าที่ทรงอำนาจ ได้รับการเปิดเผยจากพระเจ้า

2025-12-03.

ไม้ชนิดใดที่แข็งที่สุดในโลก?

คุณอาจคิดว่าไม้โอ๊คหรือฮิคคอรีเป็นไม้ที่แข็ง แต่เมื่อต้องพูดถึงไม้ที่แข็งที่สุดในโลกแล้ว พวกมันกลับไม่ใกล้เคียงเลย

2025-10-29.

10 สิ่งมีชีวิตใต้ทะเลที่น่ากลัวที่สุดที่แฝงตัวอยู่ในส่วนลึกของมหาสมุทร

มหาสมุทรเต็มไปด้วยความงาม แต่ก็ซ่อนสิ่งมีชีวิตใต้ท้องทะเลที่น่ากลัวที่สุดบางชนิดไว้เช่นกัน สัตว์เหล่านี้หลายชนิดซ่อนตัวอยู่ใต้ผิวน้ำอันมืดมิด ในโลกใต้ทะเลลึกอันแสนกดดันและมืดมิด

2025-10-29.

10 สุดยอดการร่ายมนตร์ดาบใน Minecraft

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

2025-10-29.

ที่ 9,800 เหรียญสหรัฐ คุณจะ 'แพ็ค 'Em In' ใน Toyota RAV4 7 ที่นั่งปี 2008 นี้หรือไม่?

RAV4 นี้อ้างว่าอยู่ในสภาพที่ดีเยี่ยมและมีไว้สำหรับการเล่นเก้าอี้ดนตรี

2024-07-03 19:04.

การแสดง Black Panther ของ Marvel จะเป็นการแสดงแอนิเมชั่นที่สำคัญที่สุด

Eyes of Wakanda เชื่อมโยงโดยตรงกับ MCU พร้อมอัปเดตเกี่ยวกับ X-Men '97, What If..., Daredevil และอีกมากมาย

2024-07-03 19:03.

แอนนา วินทัวร์ ก้าวลงจากตำแหน่งบรรณาธิการบริหารของ Vogue หลังจากดำรงตำแหน่งมา 37 ปี และเธอกำลังรับสมัครพนักงาน!

บรรณาธิการบริหารคนเก่าแก่ที่เข้าร่วม American Vogue ในปี 1988 ได้ประกาศข่าวดังกล่าวในการประชุมพนักงานเมื่อเช้าวันพฤหัสบดีที่ 26 มิถุนายน

2025-06-27.

สมเด็จพระสันตปาปาฟรานซิสสิ้นพระชนม์ด้วยพระชนมายุ 88 พรรษา หลังวิกฤตด้านสุขภาพ

สมเด็จพระสันตะปาปาฟรานซิส ประมุขแห่งคริสตจักรคาทอลิกและผู้นำชาวคาทอลิกทั่วโลกราว 1.3 พันล้านคน สิ้นพระชนม์แล้ว สิริพระชนมายุ 88 พรรษา

2025-04-21.

ประวัติการออกเดทของ Ava Gardner: ย้อนมองการแต่งงานและความโรแมนติกของไอคอนแห่งฮอลลีวูด

Ava Gardner แต่งงานกับ Mickey Rooney และ Frank Sintra และเธอยังคบหาดูใจกับดาราฮอลลีวูดอีกหลายคน ต่อไปนี้คือประวัติการออกเดทของ Ava Gardner

2024-06-23.

ภรรยาของจอห์น คลีส คือใคร? ข้อมูลทั้งหมดเกี่ยวกับเจนนิเฟอร์ เวด

จอห์น คลีส แต่งงานกับเจนนิเฟอร์ เวด ภรรยาของเขาในปี 2012 นี่คือทุกสิ่งที่คุณต้องรู้เกี่ยวกับเจนนิเฟอร์ เวด ภรรยาของจอห์น คลีส

2024-06-16.

สรรพนามน่ากลัวมาก

มันทำให้ฉันประหลาดใจ ทันใดนั้นมันก็เกิดขึ้นบ่อยๆ มันอยู่กลางทางอีกครั้ง <ไม่ ไม่ใช่คนในมหาสมุทรแปซิฟิก คุณเป็นสีน้ำตาลแดง คนที่งานคาร์นิวัล> ทุกพาดหัวข่าวดัง…..

3 วิธีที่พิสูจน์แล้วในการพัฒนาทักษะการเขียนของคุณ

ประโยชน์ของการเขียนและกลยุทธ์ที่จะช่วยให้คุณทำได้

ในปี 2022 ด้วยการเปิดตัว GPT-3 ทักษะการเขียนดูเหมือนจะมีความสำคัญน้อยลง ด้วย AI คนที่เขียนไม่ดีก็สามารถสร้างพนักงานที่มีคุณภาพได้เช่นกัน

การพังทลายอย่างช้าๆ: เปิดเผยวิธีที่ผู้คนสูญเสียไปในอาชีพของพวกเขา

ในโลกที่เปลี่ยนแปลงอย่างรวดเร็วและการแข่งขันในปัจจุบัน อาชีพของคนๆ หนึ่งมีบทบาทสำคัญในการเติบโตส่วนบุคคล ความมั่นคงทางการเงิน และความพึงพอใจในชีวิตโดยรวม อย่างไรก็ตาม ผู้คนจำนวนมากพบว่าตัวเองติดอยู่ในวงจรของความเมื่อยล้าและความไม่พอใจอย่างไม่หยุดยั้ง ค่อยๆ สูญเสียชีวิตการทำงานไป

อะไรทำให้พอดคาสต์มีอิทธิพล?

เมื่อสัปดาห์ที่แล้วฉันสังเกตเห็นข่าวประชาสัมพันธ์ที่เผยแพร่ผ่าน PressGazette (เว็บไซต์ข่าวของสื่ออังกฤษ) บทความประกาศว่า Acast ซึ่งเป็นบริษัทโฮสติ้งและโฆษณาพอดคาสต์ของ Scandi จะเป็นผู้นำกลุ่มผู้เผยแพร่ "อาจมีอิทธิพลมากที่สุด" ในพอดคาสต์