Flutter：使用GridView.builder使所有螢屏可滾動

在我的主螢屏中，我的應用首先顯示輪播，然后顯示從 Cloud Firestore 檢索到的挑戰卡的垂直串列，使用GridView.builder如下：

GridView.builder(
        scrollDirection: Axis.vertical,
        itemCount: _challenges.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {
              if (_challenges[index]["isLocked"] == "true") {
                showLockedDialog();
              } else {
                checkParticipation(index);
                if (checkPart == true) {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (_) =>
                              ChallengeDetails(_challenges[index])));
                }
                checkPart = true;
              }
            },
            child: Stack(
              children: [
                Center(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: Image(
                      image: NetworkImage(_challenges[index]["image-path"]),
                      fit: BoxFit.cover,
                      height: 150,
                      width: 350,
                      opacity: _challenges[index]["isLocked"] == "true"
                          ? AlwaysStoppedAnimation(.4)
                          : null,
                    ),
                  ),
                ),
                Center(
                  child: Text(
                    "${_challenges[index]["name"]}\n",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                Center(
                    child: Text(
                  "\n${_challenges[index]["date"]}",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                  textDirection: TextDirection.ltr,
                )),
                Center(
                  child: SizedBox(
                    height: 130,
                    width: 130,
                    child: _challenges[index]["isLocked"] == "true"
                        ? Image.asset("assets/lock-icon.jpg")
                        : null,
                  ),
                )
              ],
            ),
          );
        });

一切都很好，它呈現在我home_screen的如下：

body: Column(
            children: [
              AdsBanner(),
              SizedBox(
                height: 30,
              ),
              Padding(
                padding: const EdgeInsets.only(right: 8, left: 8, bottom: 5),
                child: Row(
                  children: [
                    Text(
                      AppLocalizations.of(context)!.challenges   " ",
                      style: TextStyle(fontSize: 20),
                    ),
                    Text(
                      AppLocalizations.of(context)!.clickToParticipate,
                      style: TextStyle(fontSize: 15),
                    )
                  ],
                ),
              ),
              Expanded(child: ChallengeCard()),
            ],
          ),

問題是只有該GridView區域在滾動，而我正在尋找的是用該GridView區域滾動整個螢屏，我試圖使用它CustomScrollView()但它不能正常作業。

我會感謝任何幫助。

uj5u.com熱心網友回復：

首先在你GridView.builder添加這些：

GridView.builder(
   physics: NeverScrollableScrollPhysics(),
   shrinkWrap: true,
   ...
)

然后在您home_screen的專欄中使用SingleChildScrollView：

SingleChildScrollView(
  child: Column(
            children: [
              AdsBanner(),
              SizedBox(
                height: 30,
              ),
              Padding(
      ...
  ),
),

uj5u.com熱心網友回復：

您可以在 GridView 上提供物理： NeverScrollableScrollPhysics() 以禁用滾動效果。如果您希望可滾動作為輔助小部件，請使用 primary: false，以使整頁可滾動，您可以使用 body:SingleChildScrollView(..) 或更好地使用 body:CustomScrollView(..)

標籤：扑镖颤振布局

上一篇：FlutterFirebase：如何檢查回傳值是否是特定物件

下一篇：http呼叫中的回應正文為空