Question

我想在滚动sliverAppBar下方的列表时调整其大小。

现在有两个问题：

1）我滚动列表（screenshot）时sliverAppBar不会调整大小

2）我找不到用于更改sliverAppBar的子内容大小（screenshot）时如何调整其大小的示例/解决方案

kix.l46ge8x1m={ 
      ...
      inlineObjectProperties={ 
            linkedContentReference={ 

            },
            imageProperties={ 
               cropProperties={ 

               },
               contentUri=https://lh6.googleusercontent.com/really_long_id_to_the_generated_image_from_the_slide
            }

      ...
      },
      objectId=kix.l46ge8x1m
   }

Answer 1

使用[FlexibleSpaceBar]和[SliverList]

[SliverList]可以在滚动列表时更改[sliverAppBar]的大小
[FlexibleSpaceBar]防止边框溢出

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ScrollController controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            floating: true,
            pinned: true,
            flexibleSpace: LayoutBuilder(
              builder: (context, bc) {
                double size = min(
                    // bc.constrainHeight() - MediaQuery.of(context).padding.top,
                    bc.constrainHeight(),
                    120);
                return FlexibleSpaceBar(
                  centerTitle: true,
                  // title: Container(
                  //   width: size,
                  //   height: size,
                  //   decoration: BoxDecoration(
                  //     shape: BoxShape.circle,
                  //     image: DecorationImage(
                  //       image: NetworkImage(
                  //           'https://i.loli.net/2019/08/09/OvVzMqpF3jmI8lE.jpg'),
                  //       fit: BoxFit.cover,
                  //     ),
                  //   ),
                  // ),
                  background: Center(
                    child: Container(
                      width: size,
                      height: size,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: NetworkImage(
                              'https://i.loli.net/2019/08/09/OvVzMqpF3jmI8lE.jpg'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          SliverList(
            //
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text("Text"),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Flutter：列表滚动上的sliverAppBar调整大小问题

1 个答案: