flutter - 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(),
),
],
),
),
),
],
),
),
),
);
}
}
解决方案
您只需要将 设置Padding
为零。
ListView.separated(
padding: EdgeInsets.zero, // <-- add this line
.......
推荐阅读
- go - 如何使用 goquery 检索子元素的完整 HTML?
- powershell - PowerShell 6.1.3 无法识别任何 PackageManagement cmdlet
- angular - 如何正确配置 MatDialog?
- aws-lambda - 获取异步 (InvocationType=Event) AWS lambda 执行的状态
- python - 循环遍历 Pandas 列以减去值
- python - 绘制一维数据的 KMeans 聚类和分类
- javascript - FATAL ERROR 语法错误,意外的 '<',预计文件在第 1 行结束
- python - 使用按钮 tkinter 更改画布对象的颜色
- magento - Magento 1.9 cron 正在运行,但在一种方法上停止
- sqlite - 无法在 React-Native 中通过 RecyclerListView 显示 SQLite 表