为什么我不能滚动我的SingleChildScrollView小部件?

Question

下面是我的代码:

class MasterPage extends StatefulWidget {
static String id = 'master_page';
const MasterPage({Key? key}) : super(key: key);
@override
State<MasterPage> createState() => _MasterPageState();
}
class _MasterPageState extends State<MasterPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFffaa5b),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Padding(
padding: const EdgeInsets.only(left: 30, top: 35),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
SizedBox(
height: 35,
),
Text(
'Master Menu',
style: TextStyle(
fontSize: 40,
fontFamily: 'Comfortaa',
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 50,
),
],
),
),
),
//features container
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
color: Colors.grey[100],
),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: const [
FeatureCard(),
FeatureCard(),
FeatureCard(),
FeatureCard(),
FeatureCard(),
FeatureCard(),
FeatureCard(),
SizedBox(
height: 30,
),
],
),
),
),
),
],
),
),
);
}
}

下面是我的FeatureCard小部件代码:

class FeatureCard extends StatefulWidget {
const FeatureCard({
Key? key,
}) : super(key: key);
@override
State<FeatureCard> createState() => _FeatureCardState();
}
class _FeatureCardState extends State<FeatureCard> {
final List<Map<String, dynamic>> masterMap = [
{
'image': 'assets/images/raw.png',
'title': 'Input Raw',
'destination': InputRaw.id
},
{
'image': 'assets/images/supplier.png',
'title': 'Input Supplier',
'destination': InputRaw()
},
{
'image': 'assets/images/cmt.png',
'title': 'Input CMT',
'destination': InputRaw()
},
{
'image': 'assets/images/pola.png',
'title': 'Input Pola',
'destination': InputRaw()
},
{
'image': 'assets/images/outlet.png',
'title': 'Input Outlet',
'destination': InputRaw()
},
{
'image': 'assets/images/product.png',
'title': 'Input Produk',
'destination': InputRaw()
},
{
'image': 'assets/images/material.png',
'title': 'Input Jenis Material',
'destination': InputRaw()
},
{
'image': 'assets/images/warna.png',
'title': 'Input Warna',
'destination': InputRaw()
},
{
'image': 'assets/images/qr.png',
'title': 'Input by QR',
'destination': InputRaw()
},
{
'image': 'assets/images/acc.png',
'title': 'Accessories',
'destination': InputRaw()
},
{
'image': 'assets/images/tools.png',
'title': 'Tools & Equipment',
'destination': InputRaw()
},
{
'image': 'assets/images/adjustment.png',
'title': 'Adjustments',
'destination': InputRaw()
},
{
'image': 'assets/images/stock.png',
'title': 'Stock Opname',
'destination': InputRaw()
},
];
@override
Widget build(BuildContext context) {
return GridView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: masterMap.length,
itemBuilder: (BuildContext context, index) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context, masterMap.elementAt(index)['destination']);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 105,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
child: Image.asset(
'${masterMap.elementAt(index)['image']}',
),
),
Text(
'${masterMap.elementAt(index)['title']}',
style: const TextStyle(
fontFamily: 'Quicksand',
fontSize: 20,
),
),
],
),
),
),
);
},
);
}
}

SingleChildScrollView根本没有滚动。

我试图将scrollDirection属性添加到SingleChildScrollView小部件，但它似乎没有做任何事情。

我做错了什么是保持SingleChildScrollView从滚动正确?

Answer 1

您的SingleChildScrollView包含GridView，两者都是滚动小部件。因此，您必须使后者不可滚动，因此将NeverScrollableScrollPhysics()添加到physics参数:

GridView.builder(
physics: const NeverScrollableScrollPhysics(),
...
),

Answer 2

如果您有嵌套列表，总是尝试使用Flexible/Expanded widget来分别在Column或Row widget中嵌套可滚动列表。

SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: const [
Flexible(
child: FeatureCard()
),
Flexible(
child: FeatureCard()
),
Flexible(
child: FeatureCard()
),
...
SizedBox(
height: 30,
),
],
),

你还可以使用许多技术进一步优化你的代码。