如何滚动页面，在颤动中使用图像和 gridView

如何解决如何滚动页面，在颤动中使用图像和 gridView

我的页面代码是这样的。我需要滚动应用栏下方的部分。

return Scaffold(
  backgroundColor: Theme.of(context).accentColor,appBar: AppBar(
    backgroundColor: Colors.transparent,elevation: 0.0,title: Text(campTitle,style: TextStyle(color: Theme.of(context).primaryColor,),body: Column(children: [
            Padding(
                  padding: const EdgeInsets.only(left: 40,right: 40,top: 10),child: ClipRRect(
                    borderRadius: BorderRadius.circular(28),child: Image.asset('assets/images/Flyer-Kalabrien-2020.jpg',//fit: BoxFit.fill
                      
                    ),Expanded(
                 child: GridView(
                          padding: const EdgeInsets.all(25),gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 200,childAspectRatio: 1,crossAxisspacing: 20,mainAxisspacing: 0
                    ),children: [
                        CampItems(),CampItems(),CampItems()

                      
                      

                    ],]
   ),);

我需要使应用栏下方的部分可滚动。首先我有一个图像，然后在图像下方有一个 GridView。我尝试了 SingleChildScrollView 和其他小部件，但后来我只看到一个白屏，错误是：

_AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
#1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
#2      RenderBox.size (package:Flutter/src/rendering/Box.dart:1785:12)
#3      RenderProxyBoxWithHitTestBehavior.hitTest (package:Flutter/src/rendering/proxy_Box.dart:168:9)
#4      RenderBoxContainerDefaultsMixin.defaultHitTestChildren.<anonymous closure> (package:Flutter/src/rendering/Box.dart:2596:25)
#5      BoxHitTestResult.addWithPaintOffset (package:Flutter/src/rendering/Box.dart:787:31)
#6      RenderBoxContainerDefaultsMixin.defaultHitTestChildren (package:Flutter/src/rendering/Box.dart:2591:33)
#7      RenderCustomMultiChildLayoutBox.hitTestChildren (package:Flutter/src/rendering/custom_layout.dart:412:12)
#8      Rend<…>

解决方法

删除扩展，尝试shrinkWrap：true，物理：ScrollPhysics(),

用 Column 包裹 SingleChildScrollView
在列中，设置 mainAxisSize: MainAxisSize.min
删除 Expanded 小部件
在 GridView 属性中，设置 physics: NeverScrollableScrollPhysics()

代码：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('campTitle'),),body: SingleChildScrollView(
        child: Column(mainAxisSize: MainAxisSize.min,children: [
          Padding(
            padding: const EdgeInsets.only(left: 40,right: 40,top: 10),child: ClipRRect(
              borderRadius: BorderRadius.circular(28),child: Placeholder(fallbackHeight: 100,fallbackWidth: 100),GridView(
            physics: NeverScrollableScrollPhysics(),shrinkWrap: true,padding: const EdgeInsets.all(25),gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,childAspectRatio: 1,crossAxisSpacing: 20,mainAxisSpacing: 0),children: [
              Placeholder(fallbackHeight: 30,fallbackWidth: 30),Placeholder(fallbackHeight: 30,],]),);
  }

使用以下代码并相应地替换：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,home: MyHomePage(title: 'Flutter Demo Home Page'),);
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('campTitle'),body: Column(mainAxisSize: MainAxisSize.min,children: [
        Padding(
          padding: const EdgeInsets.only(left: 40,child: ClipRRect(
            borderRadius: BorderRadius.circular(28),Flexible( // important to make it work
            child: GridView(
                physics: ScrollPhysics(),// also important to make your gridview scrollable
                shrinkWrap: true,gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 200,children: [
              for (int i = 0; i < 30; i++) // i is the number of your CampItems()
                Placeholder(fallbackHeight: 30,// replace with CampItems()

            ])),);
  }
}

有关 GridView 属性的完整列表，请参阅 documentation

物理 → ScrollPhysics 滚动视图应如何响应用户输入。 [...]

shrinkWrap → bool scrollDirection 中滚动视图的范围是否应由正在查看的内容决定。 [...]

您可能还想了解 Flexible 和 Expanded

关于灵活：

使用灵活小部件可以让行、列或 Flex 的子项灵活扩展以填充主轴上的可用空间（例如，水平用于行或垂直用于列），但是，与扩展不同的是，灵活不需要孩子填满可用空间。

另外最好用 SafeArea 包裹 Scaffold

通过足够的填充插入其子项以避免操作系统入侵的小部件。