最小化SliverAppBar时

最小化SliverAppBar时

最小化SliverAppBar时,是否有办法看到“文本”部分,如下图所示?
当最小化SliverAppBar时,是否可以看到“文本”部分,如下图?

import 'package:flutter/material.dart';

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

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

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 180.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('test'),
              background: Image.asset(
                'assets/images/background.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Text('TEST'),
            ),
          )
        ],
      ),
    );
  }
}

flutter - 在Flutter中最小化SliverAppBar时,是否有办法查看内容?-LMLPHP
flutter - 在Flutter中最小化SliverAppBar时,是否有办法查看内容?-LMLPHP

最佳答案

当您有很多项目无法容纳在屏幕中时,请使用customScrollView或其他类型的滚动 View 。在您的情况下,不需要折叠的条形应用程序栏,因此可以使用SliverToBoxAdapter代替SliverFillRemaining。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: false,
      body: Container(
        color: Colors.white,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: false,
              pinned: true,
              expandedHeight: 180.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('test'),
                background: Image.asset(
                  'assets/images/background.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Text('TEST'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

关于flutter - 在Flutter中最小化SliverAppBar时,是否有办法查看内容?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/62495665/

10-10 16:04