Flutter：为什么卡片小部件之间的间距不同答案

【问题标题】：Flutter: Why is the spacing between the card widgets differentFlutter：为什么卡片小部件之间的间距不同
【发布时间】：2020-05-23 18:35:30
【问题描述】：

我的 Card 小部件之间的间距显然是随机不同的。我正在使用带有卡片的 ListView，出于故障排除的目的，我已将上下文（文本和图像）更改为每个卡片都相同，但不知何故，间距似乎仍然不同。

在下图中，您可以看到卡片 2 和卡片 3 之间的间距远小于卡片 1 和卡片 2 之间的间距。

代码：


import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
   home: MyApp(),
 ));
}

class MyApp extends StatefulWidget {
 @override
 MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
 // List data;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text("Nyskördat"),
         backgroundColor: Colors.deepPurple,
       ),
       body: Container(
         child: Center(
           // Use future builder and DefaultAssetBundle to load the local JSON file
           child: FutureBuilder(
               future: DefaultAssetBundle.of(context)
                   .loadString('assets/fruits_data.json'),
               builder: (context, snapshot) {
                 // Decode the JSON
                 var fruits = json.decode(snapshot.data.toString());
                 var now = new DateTime.now();
                 return ListView.builder(
                   // Build the ListView
                   itemCount: fruits == null ? 0 : fruits.length,
                   itemBuilder: (BuildContext context, int index) {
                     var currentMonth = fruits[index]['months'].toString();
                     return Card(
                       child: Column(
                         children: <Widget>[
                           if (currentMonth.contains(now.month.toString()))
                             SizedBox(
                               height: 350,
                               width: 600,
                               child: Stack(
                                 children: <Widget>[
                                   if (currentMonth
                                       .contains(now.month.toString()))
                                     //Container(
                                       Image.asset('assets/orange.jpg'),// +
                                     //   fruits[index]['image'].toString()),
                                     //),
                                   if (currentMonth
                                       .contains(now.month.toString()))
                                     Container(
                                       margin: const EdgeInsets.only(
                                           bottom: 5, left: 5),
                                       child: Align(
                                         alignment: Alignment.bottomLeft,
                                         child: Text(
                                           fruits[index]['name'].toString(),
                                           style: TextStyle(
                                               fontFamily: 'DancingScript',
                                               fontSize: 70,
                                               color: Colors.lightBlue),
                                         ),
                                       ),
                                     )
                                 ],
                               ),
                             ),
                         ],
                       ),
                     );
                   },
                 );
               }),
         ),
       ));
 }
}

【问题讨论】：

如果将Card 替换为Container 等其他小部件，间距会消失吗？

标签： ios flutter dart

【解决方案1】：

Card 内的Column 将只有if (currentMonth.contains(now.month.toString())) 的子级。您的所有fruits 都符合这种情况吗？
我想不是。您没有为相反的情况提供任何内容，导致Card 为空。 Card 小部件默认有 4 px 的边距，这对你来说看起来像是更多的空白空间。

顺便说一句，您不必在Stack 中重复if (currentMonth.contains(now.month.toString())) 条件，因为如果第一次不满足条件，则不会构建整个事情。

【讨论】：