web-dev-qa-db-ja.com

Flutter-TabBarViewのアニメーションを変更する

DeafualtTabControllerを使用して基本的なTabBarおよびTabBarViewを実装しました。以下のコードを参照してください。

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: BOTTOM_TABS,
      child: Scaffold(
        appBar: AppBar(title: const Text('Bottom App Bar')),
        body: _tabBarView(),
        bottomNavigationBar: _bottomTabBar(),
      ),
    );
  }

  _tabBarView() {
    return TabBarView(
      physics: NeverScrollableScrollPhysics(),
      children: [
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.lightGreen,
        ),
        Container(
          color: Colors.red,
        ),
      ],
    );
  }

  _bottomTabBar() {
    return TabBar(
      tabs: [
        Tab(
          icon: new Icon(Icons.home),
        ),
        Tab(
          icon: new Icon(Icons.public),
        ),
        Tab(
          icon: new Icon(Icons.group),
        ),
        Tab(
          icon: new Icon(Icons.person),
        )
      ],
    );
  }
}

よく働く！次に、2つのタブ間のアニメーションをデフォルトのアニメーションから変更します。しかし、私はそれを行う簡単な方法を見つけることができません。

少し調べたところ、カスタムのTabControllerを使用し、何らかの方法で animateTo メソッドを使用する必要があるようです。私にとっては、アニメーションを変更するだけでかなり大きな変更のように思えます。 それが正しい方法であるのか、またはタブビュー間でデフォルトのアニメーションを変更する簡単な方法がないのか？

誰かが私を正しい方向に向かわせるために私にいくつかの良いリソースを与えることができるならば、私はそれを大いに感謝します。

flutterflutter-layoutflutter-animation
11
molundb

これは難しくありません。TabController（これを行うには、SingleTickerProviderStateMixinを使用する必要があります）とAnimatedBuilderを使用するだけです。

enter image description here

class MyApp2 extends StatefulWidget {
  @override
  _MyApp2State createState() => _MyApp2State();
}

class _MyApp2State extends State<MyApp2> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 4, vsync: this);
    super.initState();
  }

  _tabBarView() {
    return AnimatedBuilder(
      animation: _tabController.animation,
      builder: (BuildContext context, snapshot) {
        return Transform.rotate(
          angle: _tabController.animation.value * pi,
          child: [
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.orange,
            ),
            Container(
              color: Colors.lightGreen,
            ),
            Container(
              color: Colors.red,
            ),
          ][_tabController.animation.value.round()],
        );
      },
    );
  }

  _bottomTabBar() {
    return TabBar(
      controller: _tabController,
      labelColor: Colors.black,
      tabs: [
        Tab(
          icon: new Icon(Icons.home),
        ),
        Tab(
          icon: new Icon(Icons.public),
        ),
        Tab(
          icon: new Icon(Icons.group),
        ),
        Tab(
          icon: new Icon(Icons.person),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(title: const Text('Bottom App Bar')),
        body: _tabBarView(),
        bottomNavigationBar: _bottomTabBar(),
      ),
    );
  }
}
3
Kherel

アニメーションを完全に変えたいかどうかわかりません。

ただし、カスタマイズが必要な場合は、TabControllerではなくDefaultTabControllerを使用しようとしましたか？ tabControllerをTabBar＆TabBarViewに引数として渡すだけです。

tabControllerを使用してアニメーションをカスタマイズするには、tabControllerのアニメーションを指定し、animateToのtabController関数を使用して曲線と継続時間を指定する必要があります。 。

https://api.flutter.dev/flutter/material/TabController/animateTo.htmlhttps://api.flutter.dev/flutter/material/TabController-class.html

0
Gaspard Merten