デモのアドレス: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码
序文
一般に、APP には Weibo/Douyin パーソナル センターと同様の効果があります。プルダウン更新をサポートしており、上部にはプルダウンして拡大できる画像があります。画像の下部にはいくつかのタブがあり、別のページに切り替えます。指を下にスライドすると、写真とタイトルが表示されます。(ヘッダー全体) がナビゲーション バーになり、詳細情報が表示されます。
これは基本的に
NestedScrollView+SliverAppBar+TabBar+TabBarView+を通じて実装されますEasyRefreshが、プロジェクト内にカプセル化されており、多くのコードがあり、特定のコードはデモすることができます。
2 つのサードパーティ ライブラリを使用
# NestedScrollView https://pub.flutter-io.cn/packages/extended_nested_scroll_view
extended_nested_scroll_view: ^6.1.0
# 下拉刷新(flutter_easyrefresh 3.0版本) https://pub.flutter-io.cn/packages/easy_refresh
easy_refresh: ^3.3.2+1
効果を達成する
- アプリバーのスクロールカラーグラデーション、ステータスバーの色の切り替え
- 背景画像をプルダウンして拡大します
- 上下にプルしてリフレッシュ機能
- 左右のページの状態を切り替えて維持します
- ヘッダー + フッター
- 読み込みステータスの場所をカスタマイズする
- ダークモードスイッチ
- 空のデータ処理
効果1
効果2
効果3
