时间戳

首页 > 解决方案 > Flutter：为什么卡片小部件之间的间距不同

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

问题描述

我的 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),
                                         ),
                                       ),
                                     )
                                 ],
                               ),
                             ),
                         ],
                       ),
                     );
                   },
                 );
               }),
         ),
       ));
 }
}

标签： iosflutterdart

解决方案

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

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

推荐阅读