web-dev-qa-db-ja.com

フラッター-FloatingActionButtonの非表示

Flutterには、FloatingActionButtonを下にスクロールしてから上にスクロールして表示するListViewを非表示にする方法が組み込まれていますか？

mobiledartflutter
16
Marcin Szałek
import 'package:flutter/material.Dart';
import 'package:flutter/rendering.Dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
 }
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ScrollController _hideButtonController;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  var _isVisible;
  @override
  initState(){
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener((){
      if(_hideButtonController.position.userScrollDirection == ScrollDirection.reverse){
        if(_isVisible == true) {
            /* only set when the previous state is false
             * Less widget rebuilds 
             */
            print("**** ${_isVisible} up"); //Move IO away from setState
            setState((){
              _isVisible = false;
            });
        }
      } else {
        if(_hideButtonController.position.userScrollDirection == ScrollDirection.forward){
          if(_isVisible == false) {
              /* only set when the previous state is false
               * Less widget rebuilds 
               */
               print("**** ${_isVisible} down"); //Move IO away from setState
               setState((){
                 _isVisible = true;
               });
           }
        }
    }});
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new CustomScrollView(
          controller: _hideButtonController,
          shrinkWrap: true,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.all(20.0),
              sliver: new SliverList(
                delegate: new SliverChildListDelegate(
                  <Widget>[
                    const Text('I\'m dedicating every day to you'),
                    const Text('Domestic life was never quite my style'),
                    const Text('When you smile, you knock me out, I fall apart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('I realize I am crazy'),   
                  ],
                ),
              ),
            ),
          ],
        )
      ),
      floatingActionButton: new Visibility( 
        visible: _isVisible,
        child: new FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: new Icon(Icons.add),
        ),     
      ),
    );
  }
}

リストビューでスクロールする方法がわからないため、リストビューを使用しなかった場合は謝罪します。あなたの質問の他の部分に答えます。

まず、 scrollPostion イベントをリッスンする scrollcontroller を作成する必要があります

Scrollcontrollerが scrolldirection forwardまたはreverseを見つけた場合。状態を表示に設定する状態を追加します。

ボタンを描くとき、​​ボタンを visibility クラスにラップします。表示フラグを設定すると、ウィジェットは入力コマンドを無視する必要があります。

編集：ScrollController、ScrollerPosition、ScrollDirection、Opacityへのリンクを追加できないようです。自分で検索するか、他の人がリンクで編集できると思います

Edit2：レイアウトツリーに未塗装のウィジェットが必要な場合を除き、CopsonRoadまたは可視性ウィジェットを使用します

Edit3：コードをそのまま使用する新参者を考慮して、コードを更新してより良いプラクティスを奨励します。不透明度の代わりに可視性を使用します。 setStateからioを削除します。 Flutter 1.5.4-hotfix.2でテスト済み

24
user1462442

渡す方法はたくさんあります。ここにいくつか挙げてみましょう。

  1. Visibilityを使用できます FABを非表示/表示できます。

    floatingActionButton: Visibility(
  child: FloatingActionButton(...),
  visible: false, // set it to false
)

  2. Dart 2.2では、ifを使用できます次のような条件：

    floatingActionButton: Column(
  children: <Widget>[
    if (shouldShow) FloatingActionButton(...), // visible if showShould is true
  ],
)

  3. Opacityを使用できますウィジェット。

    floatingActionButton: Opacity(
  opacity: shouldShow ? 1 : 0, // visible if showShould is true
  child: FloatingActionButton(...),
)
9
CopsOnRoad

子ウィジェットの可視性を処理するためにVisibilityウィジェットを使用できます

サンプル ：

  floatingActionButton:
            Visibility(visible: _visibilityFlag , child: _buildFAB(context)),
5
Sibin

他の非常に良い方法はAnimatedOpacity

AnimatedOpacity(
          opacity: isEnabled ? 0.0 : 1.0,
          duration: Duration(milliseconds: 1000),
          child: FloatingActionButton(
             onPressed: your_method,
             tooltip: 'Increment',
             child: new Icon(Icons.add),
          ),
        )
0
Álvaro Agüero