我是flutter的新手，我正在嘗試在串列視圖中的容器之間添加一些空間，實際上嘗試了所有方法但失敗了，我想將它們劃分為容器以便更好地可視化串列中的專案，提前致謝！
代碼：
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(15),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Row(
children: [
SizedBox(
width: 70,
child: AspectRatio(
aspectRatio: 0.88,
child: Container(
padding: EdgeInsets.all(22),
decoration: BoxDecoration(
color: Color(0xFFF5F6F9),
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
'assets/syringe.png',
),
),
),
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Type d'analyse",
style: TextStyle(color: Colors.black, fontSize: 16),
maxLines: 2,
),
SizedBox(height: 10),
Text.rich(
TextSpan(
text: "Date: ",
style: TextStyle(
fontWeight: FontWeight.w600,
color: kPrimaryColor),
),
),
],
),
],
);
},
),
)
],
),
截屏：
uj5u.com熱心網友回復：
使用ListView.separated代替ListView.builder
它的作業原理完全相同，但添加了separatorBuilder引數。可能是這樣的
separatorBuilder: (BuildContext context, int index) => const Divider()
uj5u.com熱心網友回復：
Row將a包裹起來Container并設定margin如下：
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(15),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(bottom: 10),
child: Row(
children: [
SizedBox(
width: 70,
child: AspectRatio(
aspectRatio: 0.88,
child: Container(
padding: EdgeInsets.all(22),
decoration: BoxDecoration(
color: Color(0xFFF5F6F9),
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
'assets/syringe.png',
),
),
),
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Type d'analyse",
style: TextStyle(color: Colors.black, fontSize: 16),
maxLines: 2,
),
SizedBox(height: 10),
Text.rich(
TextSpan(
text: "Date: ",
style: TextStyle(
fontWeight: FontWeight.w600,
color: kPrimaryColor),
),
),
],
),
],
),
);
},
),
)
],
),
uj5u.com熱心網友回復：
您可以使用分隔符生成器，??也可以使用填充小部件包裝串列項。
body: Column(
children: <Widget>[
Expanded(
child: ListView.separated(
separatorBuilder: (context, index) => SizedBox(height: 10,),
padding: EdgeInsets.all(15),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
SizedBox(
width: 70,
child: AspectRatio(
aspectRatio: 0.88,
child: Container(
padding: EdgeInsets.all(22),
decoration: BoxDecoration(
color: Color(0xFFF5F6F9),
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
'assets/syringe.png',
),
),
),
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Type d'analyse",
style: TextStyle(color: Colors.black, fontSize: 16),
maxLines: 2,
),
SizedBox(height: 10),
Text.rich(
TextSpan(
text: "Date: ",
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
],
),
],
),
);
},
),
)
],
),
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445205.html