我有folowing code:

    return Scaffold(
      body: CustomScrollView(
          physics: const AlwaysScrollableScrollPhysics(
            parent: BouncingScrollPhysics(),
          ),
          controller: controller,
          slivers: [
            SliverToBoxAdapter(
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 64),
                  child: Text(
                    'Title',
                    style: theme.textTheme.titleLarge?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: theme.colorScheme.onPrimary,
                    ),
                  ),
                ),
              ),
            ),
            SliverList.builder(
              itemCount: tiles.length,
              itemBuilder: (context, index) {
                final text = tiles[index];
                return Card(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 24,
                    vertical: 8,
                  ),
                  child: ListTile(
                    title: Text(
                      text,
                      style: theme.textTheme.bodyLarge,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
    );

这会导致我的布局输出在我的手机上如下所示:

Current layout

我想要的是一种将所有东西都放在中心的方式,如果所有东西都适合屏幕的话,或者继续原样.

Centered

有没有可能用Slivers做类似的事情?我想要它们,因为我希望当项目滚动时,标题会随着项目一起反弹和滚动.

推荐答案

与ListView类似,CustomScrollView具有包络处理变量,当设置为TRUE时,将try 最小化滚动区域的高度.

Scaffold的默认对齐方式是左上角,因此一旦收缩卷动视图,您将需要添加中心小部件作为它的父部件,以获得所需的中心对齐方式.代码如下所示:

return Scaffold(
      body: Center(
        child: CustomScrollView(
          shrinkWrap: true,
          physics: AlwaysScrollableScrollPhysics(
            parent: BouncingScrollPhysics(),
          ),
          controller: controller,
          slivers: [
            SliverToBoxAdapter(
              child: Center(
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 64),
                  child: Text(
                    'Title',
                    style: theme.textTheme.titleLarge?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: theme.colorScheme.onPrimary,
                    ),
                  ),
                ),
              ),
            ),
            SliverList.builder(
              itemCount: tiles.length,
              itemBuilder: (context, index) {
                final text = tiles[index];
                return Card(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 24,
                    vertical: 8,
                  ),
                  child: ListTile(
                    title: Text(
                      text,
                      style: theme.textTheme.bodyLarge,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );

Flutter相关问答推荐

ListTile未正确显示在flutter中

ShaderMask上的文本渐变问题

video_player在Android上返回401 Unauthorized with Bunny CDN

我有一个问题:类型';()=>;Null';不是类型转换中类型';(Int)=>;void';的子类型

CMakeLists.txt处的CMake错误:3(项目)找不到指定的Visual Studio实例

Android Studio将不会构建iOS模拟器应用程序,因为plist.info有问题

我怎样才能go 掉这个底部导航栏上的白色背景

Flutter为什么不;没有ListView.iterable()构造函数?

Flutter卡内容未在水平列表视图中居中

SliverAppbar 呈蓝色

ScaffoldMessenger 在等待键下方不起作用

Dart 和 flutter 错误无法在您的 PATH 中找到 git

Flutter如何从深入嵌套的小部件中打开抽屉?

在 Flutter 中更改喜欢按钮的 colored颜色

Flutter:如何从运行时创建的列表中访问单个子部件的值

转换函数上传文件上传Uint8List

减少 Flutter 中 API 的连接等待时间

如何在 GridView.builder 中设置 textform 字段并在 flutter 中将 12 个 textformfield 作为单个字符串获取?

如何在 ElevatedButton 上设置背景 colored颜色 动画?

Flutter 在滚动期间保持某些元素固定?