2017-08-25 7 views
3

私はHeroをスクロールして、その一部がオフスクリーンになるようにすることができます。私がトランジションをトリガすると、それはAppBarの上に突然ジャンプして、トランジションが逆転したときにジャンプして戻ってきます。 AppBarHeroの上に維持するにはどうすればよいですか?スクロールしたヒーローがアプリケーションバーの上にジャンプしないようにします

video

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new Example(), 
    theme: new ThemeData(primaryColor: Colors.orange), 
    debugShowCheckedModeBanner: false, 
)); 
} 

Widget positionHeroOverlay(BuildContext context, Widget overlay, Rect rect, Size size) { 
    final RelativeRect offsets = new RelativeRect.fromSize(rect, size); 
    return new Positioned(
    top: offsets.top, 
    right: offsets.right, 
    bottom: offsets.bottom, 
    left: offsets.left, 
    child: overlay, 
); 
} 

class LogoPageRoute extends MaterialPageRoute<Null> { 
    LogoPageRoute(this.colors) : super(
    builder: (BuildContext context) { 
     return new Scaffold(
     appBar: new AppBar(
      title: new Text('Flutter Logo'), 
     ), 
     body: new ConstrainedBox(
      constraints: new BoxConstraints.expand(), 
      child: new Hero(
      tag: colors, 
      child: new FlutterLogo(colors: colors), 
     ), 
     ), 
    ); 
    }, 
); 

    /// The color of logo to display 
    final MaterialColor colors; 

    @override 
    final Duration transitionDuration = const Duration(seconds: 1); 
} 

final List<MaterialColor> swatches = [ 
    Colors.blue, 
    Colors.orange, 
    Colors.green, 
]; 

class Example extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('All Logos'), 
    ), 
     body: new ListView(
     children: swatches.map((MaterialColor colors) { 
      return new InkWell(
      onTap:() { 
       Navigator.push(context, new LogoPageRoute(colors)); 
      }, 
      child: new Hero(
       tag: colors, 
       child: new FlutterLogo(size: 360.0, colors: colors), 
      ), 
     ); 
     }).toList(), 
    ), 
    ); 
    } 
} 

答えて

2

上に滞在することを強制するためにHeroであなたのAppBarを包みます。詳細ページのAppBarについては

appBar: new PreferredSize(
    child: new Hero(
     tag: AppBar, 
     child: new AppBar(
     title: new Text('All Logos'), 
    ), 
    ), 
    preferredSize: new AppBar().preferredSize, 
), 

、私はそれがページタイトルの変更と同時に表示されるように表示される[戻る]ボタンを強制的に推薦します。あなたはしかし、アプリバーのスライドトランジションを失う

video

+0

appBar: new PreferredSize( child: new Hero( tag: AppBar, child: new AppBar( leading: const BackButton(), title: new Text('Flutter Logo'), ), ), preferredSize: new AppBar().preferredSize, ), 

はここのように見えるものです。 –

+0

はい、私は誰かより良い答えを提出することを期待しています:) –

+0

ヒーローがナビゲータオーバーレイを使用することを考慮して、私はそれが仕事や邪魔にならないコードなしで全く同じアニメーションを持つことは可能だとは思わない。 – Darky

関連する問題