首页 > 解决方案 > ListView 从错误的位置开始?

问题描述

我有个问题。在屏幕的开头,卡片是这样的: 在此处输入图像描述

ListView顶部的元素和元素之间有很大的空间。当我向下滚动时,空间正在减少。

在此处输入图像描述

如何在开始时消除这个大间隙,以便向下滚动时间隙等于间隙?我不知道它是从哪里来的。编码:

import 'dart:convert';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:.../constants/AppConstants.dart';
import 'package:.../ui/pages/home/page/Advertisement.dart';
import 'package:.../util/HttpActions.dart';

import 'Advertisement.dart';
import 'BottomAppBar.dart';
import 'FAB.dart';

class HomePage extends StatefulWidget {
  final String jwt;

  const HomePage(this.jwt);

  @override
  _HomePage createState() => _HomePage();

  factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}

class _HomePage extends State<HomePage> {
  late final String jwt;
  late Future<List<Items>> _listOfItems;
  final searchTextController = TextEditingController();

  @override
  void initState() {
    super.initState();
    jwt = widget.jwt;
    _listOfItems = fetchAdvertisements();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Scaffold(
          backgroundColor: const Color(0xFEF9F9FC),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: buildFAB(),
          bottomNavigationBar: BuildBottomAppBar(),
          body: Container(
            padding: EdgeInsets.only(left: 25.0, right: 25, top: 20),
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(
              children: [
                TextFormField(
                  controller: searchTextController,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'Szukaj',
                      fillColor: Color(0xffd4d4d4),
                      filled: true),
                ),
                FutureBuilder<List<Items>>(
                  future: _listOfItems,
                  builder: (context, snapshot) {
                    if (!snapshot.hasData) {
                      return Center(child: CircularProgressIndicator());
                    } else {
                      return Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(bottom: 30, top: 5),
                          child: ListView.separated(
                            scrollDirection: Axis.vertical,
                            shrinkWrap: true,
                            itemCount: snapshot.data!.length,
                            itemBuilder: (BuildContext context, int index) =>
                                advertisementCard(snapshot.data![index], context),
                            separatorBuilder: (BuildContext context, int index) {
                              return SizedBox(
                                height: 10,
                              );
                            },
                          ),
                        ),
                      );
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      );

  Future<List<Items>> fetchAdvertisements() async {
    var response = await HttpActions.makeHttpGet(
      {},
      AppConstants.ADVERTISEMENTS_ENDPOINT,
      {HttpHeaders.contentTypeHeader: HttpActions.APPLICATION_JSON_HEADER},
    );
    if (response.statusCode == 200) {
      var advertisement = Advertisement.fromJson(
        json.decode(utf8.decode(response.bodyBytes)),
      );
      return advertisement.items;
    } else {
      throw Exception('Failed to load advertisements');
    }
  }

  Container advertisementCard(Items data, BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.17,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(9.0),
          side: BorderSide(
            color: Color(0xFE8BA9E2),
          ),
        ),
        child: LayoutBuilder(
          builder: (context, constraints) => Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.network(
                  'https://image.ceneostatic.pl/data/products/68753970/i-motorowka-yamaha-242-limited-s-model-2019-szamocin.jpg',
                  fit: BoxFit.cover,
                  width: constraints.maxWidth * 0.4 - (8.0 * 2),
                  height: constraints.maxHeight * 0.8,
                ),
              ),
              SizedBox(
                width: constraints.maxWidth * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        data.title,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: GoogleFonts.sourceSerifPro(
                          fontWeight: FontWeight.w700,
                          fontStyle: FontStyle.normal,
                        ),
                      ),
                      SizedBox(
                        height: constraints.maxHeight * .4,
                      ),
                      Text(
                        "Miasto: " + data.city,
                        style: GoogleFonts.sourceSerifPro(),
                      ),
                      Text(
                        "Pierwszy dzień: 20 zł",
                        style: GoogleFonts.sourceSerifPro(),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签: flutterdartlistview

解决方案


您只需要将 设置Padding为零。

ListView.separated(
                   padding: EdgeInsets.zero, // <-- add this line
                   .......

推荐阅读