[Flutter]ListView

更新於 發佈於 閱讀時間約 3 分鐘

可以透過scrollDirection來設定垂直或水平滾動列表資料。


垂直滾動

class HomePage extends StatelessWidget {
//列表集合資料
List<Widget> list = <Widget>[
ListTile(
title: Text(
'title1',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle1'),
),
ListTile(
title: Text(
'title2',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle12'),
),
];

@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
children: list,
),
);
}
}


水平滾動

class HomePage extends StatelessWidget {
//列表集合資料
List<Widget> list = <Widget>[
ListTile(
title: Text(
'title1',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle1'),
),
ListTile(
title: Text(
'title2',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle12'),
),
];

@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
scrollDirection: Axis.horizontal,
children: list,
),
);
}
}
留言
avatar-img
留言分享你的想法!
avatar-img
小黑與程式的邂逅
8會員
123內容數
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
2023/12/28
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023/12/28
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023/12/26
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
2023/12/26
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
2023/12/26
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
2023/12/26
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
看更多
你可能也想看
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本篇教學會詳細介紹條 (Bar) 的基本特性,以及在 UI 畫面上的應用,如拖曳、調整大小、空格限制等。此外,教學也針對不同的造型特性進行解說,包括橫向或縱向條、拖曳圖示 (thumb) 調整,以及無法滑動時的隱藏或顯示設定。
Thumbnail
本篇教學會詳細介紹條 (Bar) 的基本特性,以及在 UI 畫面上的應用,如拖曳、調整大小、空格限制等。此外,教學也針對不同的造型特性進行解說,包括橫向或縱向條、拖曳圖示 (thumb) 調整,以及無法滑動時的隱藏或顯示設定。
Thumbnail
本章節的目的是介紹 Kotlin 的各種資料型別。包括內建型別如基本數值型別、字串型別和布林型別等,以及如何進行型別轉換。此外,也介紹了如何定義自訂型別(類)和元組型別,以及 Kotlin 提供的集合型別,例如列表(List)、集合(Set)和映射(Map)以及陣列(Array)。
Thumbnail
本章節的目的是介紹 Kotlin 的各種資料型別。包括內建型別如基本數值型別、字串型別和布林型別等,以及如何進行型別轉換。此外,也介紹了如何定義自訂型別(類)和元組型別,以及 Kotlin 提供的集合型別,例如列表(List)、集合(Set)和映射(Map)以及陣列(Array)。
Thumbnail
這篇文章,會帶著大家複習以前學過的滑動窗口(Sliding window)框架, 並且滿足特定區間的概念與應用為核心, 貫穿一些相關聯的題目,透過框架複現來幫助讀者理解這個演算法框架。 滑動窗口(Sliding window)框架示意圖 滑動窗口(Sliding window)的框架
Thumbnail
這篇文章,會帶著大家複習以前學過的滑動窗口(Sliding window)框架, 並且滿足特定區間的概念與應用為核心, 貫穿一些相關聯的題目,透過框架複現來幫助讀者理解這個演算法框架。 滑動窗口(Sliding window)框架示意圖 滑動窗口(Sliding window)的框架
Thumbnail
ListViewItem 交換順序以及拖曳效果。
Thumbnail
ListViewItem 交換順序以及拖曳效果。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 layout_weight 權重屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 layout_weight 權重屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 layout_gravity 對齊屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 layout_gravity 對齊屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 gravity 對齊屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 gravity 對齊屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 padding 內部間距屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的 padding 內部間距屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的orientation 排列方向屬性。
Thumbnail
本課程學習如何使用 LinearLayout 線性佈局中的orientation 排列方向屬性。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News