背景知識
有使用到 Center 、 Container 、 Column 、 可參考Flutter-最簡單的 Center 使用範例 、Flutter-最簡單的 Container 使用範例、Flutter-最簡單的 Column 使用範例 、 Flutter-最簡單的 Column 使用範例
介紹內容
ListView 是製作 APP 最常用的基礎物件之一，相對於 iOS 原生 TableView 或 Android 的 ListView 來說 Flutter 的 ListView 算是相當好上手的物件 ，下面我們來進行簡單的範例，最終呈現畫面如下
開始
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Center(
child: Text(
name,
style:
TextStyle(color: Colors.black, decoration: TextDecoration.none),
),
);
});
}
加入背景顏色變化
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Center(
child: Text(
name,
style: TextStyle(
color: Colors.black, decoration: TextDecoration.none),
),
),
);
});
加入分類器（Divider) ，將 item 之間做間隔， 首先在 Container 之前加入 Column
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Column(
children: [
Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Center(
child: Text(
name,
style: TextStyle(
color: Colors.black, decoration: TextDecoration.none),
),
),
),
],
);
});
畫面上看起來沒有改變，但現在我們可以利用 Column 在字的下方放入想要的物件，這時加入 Divider 來看看效果
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Column(
children: [
Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Center(
child: Text(
name,
style: TextStyle(
color: Colors.black, decoration: TextDecoration.none),
),
),
),
Divider()
],
);
});
常見的 listview 前方通常會搭配，圖片進行顯示， 先使用 Raw 再搭配 Cord 佔位
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Column(
children: [
Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Row(
children: [
Container(
height: 80,
width: 80,
child: Card(
color: Colors.red,
)),
Text(
name,
style: TextStyle(
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
Divider()
],
);
});
加入圖片
專案底下加入一個image資料夾
放入圖片
打開 pubspec.yaml
找到 assets 並取消註解與加入 image
在 Card 中加入 Image.asset(“image/山楂.jpg”) 測試圖片效果
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Column(
children: [
Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Row(
children: [
Container(
height: 80,
width: 80,
child: Card(
color: Colors.red,
child: Image.asset("image/山楂.jpg"),
)),
Text(
name,
style: TextStyle(
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
Divider()
],
);
});
因為圖片比例不是1:1，調整圖片填充方式 fit: BoxFit.cover,
List<String> names = [
"葡萄",
"蘋果",
"梨",
"桃",
"李子",
"杏",
"草莓",
"柿子",
"山楂",
"紅棗",
"櫻桃"
];
List<int> colorCodes = <int>[600, 500, 100];
return ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Column(
children: [
Container(
height: 100,
color: Colors.amber[colorCodes[position % colorCodes.length]],
child: Row(
children: [
Container(
height: 80,
width: 80,
child: Card(
color: Colors.red,
child: Image.asset(
"image/山楂.jpg",
fit: BoxFit.cover,
),
)),
Text(
name,
style: TextStyle(
color: Colors.black, decoration: TextDecoration.none),
),
],
),
),
Divider()
],
);
});
按照項目顯示圖片
