Flutter语言 - ListView滚动不工作(底部溢出了一些像素)

Question

Flutter -当从一个文件导入listview小部件时，它只是在应用程序的屏幕上抛出一个错误"底部溢出500像素"但是，如果listview直接在主文件中使用，它工作得很好。仅在从另一个文件导入listview小部件时抛出错误。

这是主文件和包含listview小部件的文件

import 'package:flutter/material.dart';
import 'package:flutter_application_1/Pages/widgets/exercise_list.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: const [
ExerciseList()
],
),
),
);
}
}

第二文件

import 'package:flutter/material.dart';
class ExerciseList extends StatelessWidget {
const ExerciseList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
],
);
}
}

Answer 1

这样做:

import 'package:flutter/material.dart';
class ExerciseList extends StatelessWidget {
const ExerciseList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//wrap your listview with a constraint widget: i.e container or SizedBox
//give it some height of your choice and wrap with SingleChildScrollview //widget to prevent the overflow from occuring
return Scaffold(
body: SingleChildScrollView(
child: SizedBox(
height:
MediaQuery.of(context).size.height, // takes screen full height
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
//choose direction of your choice
physics: const BouncingScrollPhysics(),
// scroll effects not the actual scrolling
children: List.generate(10, (index) =>Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
))
))),
);
}
}

在main中，你不需要列

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:  const ExerciseList()
);
}
}

Answer 2

尝试用SingleChildScrollView包装ExerciseList而不是Column:

类Home扩展StatelessWidget {const回家({钥匙吗?Key}): super(Key: Key);

@override小部件构建(BuildContext) {返回支架(身体:填充(填充:EdgeInsets.all (20.0),孩子:SingleChildScrollView (孩子:ExerciseList (),)，)，(;｝}

Answer 3

将listview包装在sizebox中，并将其高度设置为150，这样就完成了。☺☺

SizedBox(
child: ListView(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
],
));