ListView.builder 在 flutter 中不滚动

Question

我正在尝试在我的 UI 中集成一个 listView.builder，首先。 屏幕的全部内容都在一个 CustomScrollView 里面，里面有银色的小部件。 除非我的列表视图不滚动，否则一切都很好。

这是代码：

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: CustomAppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildBody(screenHeight),
        ],
      ),
    );
  }
}

_buildBody代码：

SliverToBoxAdapter _buildBody(double screenHeight) {
  return SliverToBoxAdapter(
    child: Column(
      children: [
        Container(
          width: 100,
          height: 65,
          child: Padding(
            padding: const EdgeInsets.only(top: 20),
            child: ElevatedButton(
              onPressed: () {},
              child: Text(
                'Add',
                style: TextStyle(fontSize: 18),
              ),
              style: ElevatedButton.styleFrom(
                  shape: StadiumBorder(),
                  backgroundColor: Palette.primaryColor),
            ),
          ),
        ),
        SizedBox(
          height: 10,
        ),
        ListView.builder(
            scrollDirection: Axis.vertical,
            physics: const AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: 6,
            itemBuilder: ((BuildContext context, int index) {
              return Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 20.0,
                ),
                padding: const EdgeInsets.all(10.0),
                height: screenHeight * 0.15,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFAD9FE4), Palette.primaryColor],
                  ),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Image.asset(
                      "assets/worker.png",
                      height: 80,
                      width: 80,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Somme: 50 €',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Date: 19 novembre 2022',
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Follow the instructions\nto do your own test.',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                          maxLines: 2,
                        ),
                      ],
                    )
                  ],
                ),
              );
            }))
      ],
    ),
  );
}

我尝试添加shrinkWrap: true以及滚动方向。 还尝试将它包装在 SingleScrollChildView 中，但没有一种解决方案对我有用。 我感谢任何帮助！

Answer 1

你可以使用physics: const NeverScrollableScrollPhysics(),在 listView 上，父控件已经在处理滚动事件。 但是您可以将 listView 替换为 Column 小部件。（我们已经有父级，因此使用循环）

  SliverToBoxAdapter _buildBody(double screenHeight) {
    return SliverToBoxAdapter(
      child: Column(
        children: [
          Container(
            width: 100,
            height: 65,
            child: Padding(
              padding: const EdgeInsets.only(top: 20),
              child: ElevatedButton(
                onPressed: () {},
                child: Text(
                  'Add',
                  style: TextStyle(fontSize: 18),
                ),
                style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                    backgroundColor: Palette.primaryColor),
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          for (int i = 0; i < 6; i++)
            Container(
              margin: const EdgeInsets.symmetric(
                vertical: 10.0,
                horizontal: 20.0,
              ),
              padding: const EdgeInsets.all(10.0),
              height: screenHeight * 0.15,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xFFAD9FE4), Palette.primaryColor],
                ),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Image.asset(
                    "assets/worker.png",
                    height: 80,
                    width: 80,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Somme: 50 €',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: screenHeight * 0.01),
                      Text(
                        'Date: 19 novembre 2022',
                        style: TextStyle(fontSize: 10, color: Colors.white),
                      ),
                      SizedBox(height: screenHeight * 0.01),
                      Text(
                        'Follow the instructions\nto do your own test.',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        ),
                        maxLines: 2,
                      ),
                    ],
                  )
                ],
              ),
            )
        ],
      ),
    );
  }

Answer 2

而不是在CustomScrollView中使用ListView.Builder 。 使用Slivers总是更好。 因此，不要使用SliverToBoxAdapter包装ListView.builder ，而是使用SliverList 。 这是我在下面为您重构的详细代码。 或者您可以直接访问此链接，您可以在其中使用重构代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: const DashboardScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          // your build header widget

          SliverToBoxAdapter(
            child: Container(
              width: 100,
              height: 65,
              child: Padding(
                padding: const EdgeInsets.only(top: 20),
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    'Add',
                    style: TextStyle(fontSize: 18),
                  ),
                  style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                    backgroundColor: Colors.red,
                  ),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(height: 10),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 20.0,
                ),
                padding: const EdgeInsets.all(10.0),
                height: screenHeight * 0.15,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFAD9FE4), Colors.red],
                  ),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    // Image.asset(
                    //   "assets/worker.png",
                    //   height: 80,
                    //   width: 80,
                    // ),
                    // 
                    Container(
                    height: 80,
                    width: 80,
                    child: Text("A"),
                    ),
                    
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Somme: 50 €',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Date: 19 novembre 2022',
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Follow the instructions\nto do your own test.',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                          maxLines: 2,
                        ),
                      ],
                    )
                  ],
                ),
              );
            }),
          )
        ],
      ),
    );
  }
}