Есть ли способ увидеть контент, когда SliverAppBar свернут во Flutter? - PullRequest
Новая
       87

Есть ли способ увидеть контент, когда SliverAppBar свернут во Flutter?

0 голосов
/ 21 июня 2020

Есть ли способ увидеть часть «Текст», когда 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'),
            ),
          )
        ],
      ),
    );
  }
}

enter image description here введите описание изображения здесь

1 Ответ

1 голос
/ 21 июня 2020

Использование customScrollView или другого типа прокрутки, используемого, когда у вас есть много элементов, которые не помещаются на экране. В вашем случае нет необходимости в сворачивающейся полосе приложения ленты, поэтому вместо SliverFillRemaining используйте SliverToBoxAdapter. 

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'),
              ),
            )
          ],
        ),
      ),
    );
  }
}
...