flutter 有没有一种方法可以在列中使用ListView.Builder而不使用包络处理?

ntjbwcob  于 2023-04-07  发布在  Flutter
关注(0)|答案(1)|浏览(130)

我试图将ListView.builder放置在与SliverAppBar对等的Column中。因此,我需要利用CustomScrollview和SliverToBoxAdapter,以便Column可以驻留在CustomScrollView中。
这一切都很好,只要我设置为真收缩 Package 。
但是,出于性能原因,我不想使用shrinkwrap(根据官方文档,这是非常昂贵的,并否定了ListView.Builder延迟加载列表项的性能优势)。
错误是:“RenderFlex子级具有非零的flex,但传入的高度约束是无边界的"。这是因为列具有无限的高度。
我想必须硬编码列的大小,因为这将是一个响应/自适应的支架。
我的代码在下面-我的问题是,有没有人能够使用列与ListView.Builder作为一个孩子,而不使用shrinkwrap设置为真,没有硬编码的高度?

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 1'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.red,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 2'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.green,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
q7solyqu

q7solyqu1#

您可以在Row上使用SliverFillRemaining,而内部小部件使用Expanded

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining( //this
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 1'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.red,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 2'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.green,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

我想你也会喜欢使用SliverPersistentHeader为您的情况。

相关问题