如何對齊這些串列項以使圖示位于最左側而不是居中？
class HeaderRowListView extends StatelessWidget {
final List<int> _listData = List<int>.generate(4, (i) => i);
final List<Image> _list_images_trophys = [
Image.network("https://www.clipartmax.com/png/middle/252-2524925_trophy-gold-medal-award-prize-achievements-clipart-png.png", height: 200, width: 200,),
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKnemmKgJOG_3OSk89VHtpTVAUGN1Nagcvgw&usqp=CAU", height: 200, width: 200,),
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1Ee4DhiFLB8CrzquwmJjcZepednxWN6E8oQ&usqp=CAU", height: 200, width: 200,),
Image.network("https://www.pinclipart.com/picdir/middle/570-5705065_xbox-controller-clip-art.png", height: 200, width: 200,),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.all(8.0),
children: _listData.map((i) {
return i == 0
? Column(
children: [
Image.network("https://www.clipartmax.com/png/middle/252-2524925_trophy-gold-medal-award-prize-achievements-clipart-png.png", height: 200, width: 200,),
Text("11/50",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(height: 20),
Container(
color: Colors.indigo.withOpacity(.8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Trophy",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
)),
],
),
padding: EdgeInsets.all(10.0),
),
],
)
: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: _list_images_trophys[i],
title: Text("Achievement $i"),
),
),
),
],
);
}).toList(),
),
);
}
}
uj5u.com熱心網友回復：
對于簡單的情況，設定 crossAxisAlignment: CrossAxisAlignment.start,將解決問題。
ListTile 是一個基本的內置小部件，它只能是特定的高度，似乎我們無法提供前導高度：200。
在這種情況下，我們可以使用Row創建自定義 Card，在這種情況下替換ListTile為 Row。所以 else 狀態將是
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
_list_images_trophys[i],
SizedBox(
width: 5,
), // the space between image and text
Text("Achievementx $i"),
],
),
全小部件
class HeaderRowListView extends StatelessWidget {
final List<int> _listData = List<int>.generate(4, (i) => i);
final List<Image> _list_images_trophys = [
Image.network(
"https://www.clipartmax.com/png/middle/252-2524925_trophy-gold-medal-award-prize-achievements-clipart-png.png",
height: 200,
width: 200,
),
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKnemmKgJOG_3OSk89VHtpTVAUGN1Nagcvgw&usqp=CAU",
height: 200,
width: 200,
),
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1Ee4DhiFLB8CrzquwmJjcZepednxWN6E8oQ&usqp=CAU",
height: 200,
width: 200,
),
Image.network(
"https://www.pinclipart.com/picdir/middle/570-5705065_xbox-controller-clip-art.png",
height: 200,
width: 200,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: _list_images_trophys.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, i) => i == 0
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
"https://www.clipartmax.com/png/middle/252-2524925_trophy-gold-medal-award-prize-achievements-clipart-png.png",
height: 200,
width: 200,
),
Text("11/50",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(height: 20),
Container(
color: Colors.indigo.withOpacity(.8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Trophy",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
)),
],
),
padding: EdgeInsets.all(10.0),
),
],
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
_list_images_trophys[i],
SizedBox(
width: 5,
), // the space between image and text
Text("Achievementx $i"),
],
),
// ListTile(
// dense: true,
// leading: SizedBox(
// height: 200,
// child: _list_images_trophys[i],
// ),
// title: Text("Achievementx $i"),
// ),
),
],
)),
);
}
}
uj5u.com熱心網友回復：
您的案例示例（對于小影像）：
Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(0.0),// padding
child: ListTile(
contentPadding: EdgeInsets.zero,//remove padding for list
leading: SizedBox(
child: _list_images_trophys[I],
height: 50.0, // image size
width: 50.0, // image size
),
title: Text("Achievement $i"),
),
),
),
],
);
如果您需要大影像，請從 ListTile 中洗掉前導：
title: Row(
children: [
_list_images_trophys[i],
SizedBox(width: 6.0),
Text("Achievement $i"),
],
),
如果您想在 ListTile 上允許點擊事件，這是有道理的，那么您將擁有 ListTile 的顯示影片和其他功能。如果您不需要它，那么使用 Row 而不是 ListTile 將是一個很好的解決方案。
uj5u.com熱心網友回復：
添加crossAxisAlignment : CrossAxisAlignment.start 到包含 listTile 對齊小部件的列小部件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/352481.html