ios - Flutter:为什么卡片小部件之间的间距不同

Question

我的Card窗口小部件之间的间距显然是随机不同的。我使用的是带有Cards的ListView，并且出于故障排除的目的，我已将每个Card的上下文(文本和图像)更改为相同，但是在某种程度上，间距似乎仍然有所不同。

在下图中，您可以看到卡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),
                                         ),
                                       ),
                                     )
                                 ],
                               ),
                             ),
                         ],
                       ),
                     );
                   },
                 );
               }),
         ),
       ));
 }
}

Answer 1

Column内的Card将只有if (currentMonth.contains(now.month.toString()))子级。这个条件对您所有的fruits都适用吗？
我想不是。对于相反的情况，您未提供任何内容，这导致Card为空。默认情况下，Card小部件的边距为4 px，对您来说似乎是更多的空白空间。

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