web-dev-qa-db-fra.com

flutter - barre de défilement de l'application avec le contenu qui se chevauchent dans l'espace flexible

j'essaie de recréer le défilement de la barre d'applications avec un contenu qui se chevauche dans l'espace flexible à l'aide de flutter.

le comportement est démontré ici: 

http://karthikraj.net/2016/12/24/scrolling-behavior-for-appbars-in-Android/

J'ai déjà créé la réduction de l'AppBar en utilisant SliverAppBar, en utilisant le code que j'ai collé ici, j'essaie de créer THIS 

je ne peux pas utiliser Stack pour cela parce que je ne trouve aucun rappel onScroll. Jusqu'à présent, j'ai créé appbar avec flexibleSpace, la barre d'applications se réduisait au défilement:

Scaffold(
    body: NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) => <Widget>[
                SliverAppBar(
                  forceElevated: innerBoxIsScrolled,
                  pinned: true,
                  expandedHeight: 180.0,
                ),
              ],
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) => Text(
              "Item $index",
              style: Theme.of(context).textTheme.display1,
            ),
      ),
    ),
  );

 What i created so far

edit: Exemple de ce que je veux créer

flutterflutter-layoutflutter-sliverflutter-animation
3
CodePLeX

ScrollViews prend un ScrollController qui est un écoutable qui informe sur les mises à jour de décalage de défilement.

Vous pouvez écouter le ScrollController et utiliser une pile pour obtenir l’effet qui vous intéresse en fonction du décalage de défilement.

Voici un exemple rapide:

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Scroll demo',
      home: new Scaffold(
        appBar: new AppBar(elevation: 0.0),
        body: new CustomScroll(),
      ),
    );
  }
}

class CustomScroll extends StatefulWidget {
  @override
  State createState() => new CustomScrollState();
}

class CustomScrollState extends State<CustomScroll> {
  ScrollController scrollController;
  double offset = 0.0;
  static const double kEffectHeight = 100.0;

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: AlignmentDirectional.topCenter,
      children: <Widget> [
        new Container(
          color: Colors.blue,
          height: (kEffectHeight - offset * 0.5).clamp(0.0, kEffectHeight),
        ),
        new Positioned(
          child: new Container(
            width: 200.0,
            child: new ListView.builder(
              itemCount: 100,
              itemBuilder: buildListItem,
              controller: scrollController,
            ),
          ),
        ),
      ],
    );
  }

  Widget buildListItem(BuildContext context, int index) {
    return new Container(
      color: Colors.white,
      child: new Text('Item $index')
    );
  }

  void updateOffset() {
    setState(() {
      offset = scrollController.offset;
    }); 
  }

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(updateOffset);
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(updateOffset);
  }
}
1
amir

Vous devriez également jeter un coup d’œil sur https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

0
Steve

Je pense que le widget SliverAppbar est ce que vous recherchez. 

Jetez un oeil à cet article qui vous montre comment atteindre votre objectif. 

https://flutterdoc.com/animating-app-bars-in-flutter-cf034cd6c68b

0
Mans