在使用可滚动listview.builder时使用SingleChildScrollView（颤动）

Question

这是我的全部代码：

import 'package:flutter/material.dart';
import 'package:testproject/components/event_tile.dart';
import 'package:testproject/components/mybutton.dart';

class MenuPage extends StatelessWidget {
  const MenuPage({super.key});

  @override
  Widget build(BuildContext context) {
    List EventList = [
      EventTile(
        name: "Mitama Matsuri festivial",
        price: "€ 49",
        imagePath: "lib/images/japan7.png",
        rating: "5",
        details: () {},
      ),
      EventTile(
        name: "Noddle Harmony Tokyo",
        price: "€ 18",
        imagePath: "lib/images/japan3.png",
        rating: "4",
        details: () {},
      ),
      EventTile(
        name: "Moun Fuji Tour",
        price: "€ 42",
        imagePath: "lib/images/japan6.png",
        rating: "4,3",
        details: () {},
      ),
    ];

    return Scaffold(
      backgroundColor: Color.fromARGB(255, 215, 165, 187),
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "J A P A N",
              style: TextStyle(color: Colors.white),
            ),
            SizedBox(width: 10),
            Image.asset(
              "lib/images/japanflag.png",
              height: 20,
            ),
          ],
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: Icon(
          Icons.menu_rounded,
          color: Colors.white,
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 15.0),
            child: Icon(
              Icons.shopping_cart,
              color: Colors.white,
            ),
          )
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(25),
            margin: EdgeInsets.symmetric(horizontal: 25),
            decoration: BoxDecoration(
              color: const Color(0x80d70127),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Text(
                      "32% Nachlass",
                      style: TextStyle(
                        fontSize: 22,
                      ),
                    ),
                    SizedBox(height: 15),
                    MyButton(mytext: "Buchen", event: () {})
                  ],
                ),
                Image.asset(
                  "lib/images/japan1.png",
                  height: 135,
                )
              ],
            ),
          ),
          SizedBox(height: 15),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: "Suche Event [funktioniert nicht]",
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                  borderSide: BorderSide(
                    color: Colors.white,
                    width: 2,
                  ),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                  borderSide: BorderSide(
                    color: Colors.white,
                    width: 2,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 13),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: Text(
              "Events",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(height: 5),
          Expanded(
            child: ListView.builder(
              itemBuilder: (context, index) => EventList[index],
              itemCount: EventList.length,
              scrollDirection: Axis.horizontal,
            ),
          ),
          SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: Text(
              "Derzeit beliebt",
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
          ),
          SizedBox(height: 10),
          Container(
            padding: EdgeInsets.all(8),
            margin: EdgeInsets.symmetric(horizontal: 25),
            decoration: BoxDecoration(
                color: Color.fromARGB(255, 94, 185, 160),
                borderRadius: BorderRadius.circular(20)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.asset(
                  "lib/images/japan2.png",
                  height: 115,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Kimono Kultur",
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    ),
                    SizedBox(height: 10),
                    Text(
                      "€ 45",
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white), // TextStyle
                    )
                  ],
                ),
              ],
            ),
          ),
          SizedBox(height: 10),
        ],
      ),
    );
  }
}

我这里有一个

listView.builder

：

Expanded(
            child: ListView.builder(
              itemBuilder: (context, index) => EventList[index],
              itemCount: EventList.length,
              scrollDirection: Axis.horizontal,
            ),
          ),

我必须使整个页面可滚动，因为没有足够的空间来容纳所有内容，我已经底部溢出了。

通过在正文的开头添加

SingleChildScrollView

类：

 body: Column( //right here
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(25),
            margin: EdgeInsets.symmetric(horizontal: 25),
            decoration: BoxDecoration(
              color: const Color(0x80d70127),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Row(

我遇到了一切都消失的问题。制作

shrinkWrap: true

没有任何作用，并且

physics: NeverScrollableScrollPhysics()

不是我需要的，因为

listView.builder

仍然必须滚动。另外，在最好的情况下，我想保留

Expanded

因为高度会变化 我怎样才能做到这一点？

Answer 1

如果您想滚动整个页面，则不能同时使用 Expanded 和 SingleChildScrollView，而不是必须从可能适合您的列表视图中删除 Expanded。

Answer 2

删除 Expanded 并使用

shrinkWrap: true

作为 ListView 的属性

Expanded(
    child: ListView.builder(
    shrinkWrap: true
    itemBuilder: (context, index) => EventList[index],
    itemCount: EventList.length,
    scrollDirection: Axis.horizontal,
   ),
 ),

Answer 3

我使用

CustomScrollView

和

SliverList

代替

ListView.builder

，它并不完美，因为它有一个定义的高度，但它可以工作。 这样

SingleChildScrollView

也可以工作。

Container(
              height: 300,
              child: CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return eventList[index];
                      },
                      childCount: eventList.length,
                    ),
                  ),
                ],
                scrollDirection: Axis.horizontal,
              ),
            ),