今日、長い間後回しにしていたホームページを書き終えました。そのうちの 3 つは、ランダム アルバム、よく再生された曲のリスト、最近追加したアルバムです。
実際、このアプリと NetEase Cloud の最大の違いは、これらの曲を自分で収集して聴くため、推奨アルゴリズムが必要ないことです。
CustomScrollView
ホームページで最も厄介な点は、水平リストと垂直リストが混在することですが、それほど複雑ではありません。主なことは、高さと幅、または最大幅と最大高さを固定することを覚えておくことです。それ以外の場合は、非常に簡単です。エラーを報告します。
1 つ目は、人によって好まれたり嫌われたりする スライバー です。ただし、これらの自動化された機能により、彼の 子供 になることができるコントロールはほとんどありません。しかし幸いなことに、公式は SliverToBoxAdapter コンポーネントを提供しているので、子 ではないコンポーネントをスキンのレイヤーで覆うことができます。これは非常に優れています。
レイアウトは、ランダムな 10 枚のアルバムの水平スクロール リストです。以下は最も再生された 10 曲の垂直方向のリストで、その下には最近追加された 10 個の水平方向のアルバムのリストが表示されます。の方がいいです?
実装も比較的単純です。たとえば、SliverList コントロールに加えて、タイトル部分を SliverToBoxAdapter でカバーする必要があります。
デスクトップと互換性を持たせたいため、デスクトップ上で左右にスライドできる Apple の Magic Mouse を除いて、通常のマウスにはこの機能がないため、デスクトップ用に左右にスライドするボタンを追加する必要があります。クリック。
1 | return CustomScrollView( |
これはホームページ ビルドのコンテンツであり、MySliverControlBar の内部は非常に単純で、行の中に 1 行が含まれているだけです。
MySliverControlList は実際には水平の ListView です
ここで、デスクトップ要件がない場合、つまりスクロールを手動で制御する必要がない場合は、コントローラーを作成する必要はありませんが、スクロールを制御する必要がある場合は、制御メソッドを挿入する必要があることに注意してください。比較的単純で、ボタンをクリックするだけでトリガーされます。
1 | controller.animateTo(controller.offset - _size.width / 2, |
offsetは非常に雰囲気のあるもので、1 回のクリックで画面の半分が移動します。数回のクリックを節約できます。半日は動きません。
このようにして、後でコンテンツを追加したい場合は、今のところはこれで完了です。
さらに、今日は、下部のコントロール部分を bottomNavigationBar に完全に移動しました。これにより、レイアウトがよりシンプルに見えます。これは、後でもう一度調整する必要があるかもしれません。 LeftScreen を各ページに直接埋め込んで、フラッター全体のルーティングを使用し、ルーティングを制御するグローバル変数を削除できるようにします。
最も重要なことは、デスクトップの場合は LeftScreen を表示し、bottomNavigationBar に直接ナビゲーションを追加して、横にスライドするボタンをオンにすることです。モバイル端末の左上は取り外し可能です。左側は Windows クライアント用の場所を自由に残すことができます。クライアントが Windows の場合、Windows のズームとクロスが右側にあるため、検索と設定のボタンを左側に配置できるため、削除しました。タイトル バーが表示されるため、十字をブロックすることはできません。
MediaQuery を使用するとソフト キーボードがポップアップしなくなる
モバイル ソリューション
Scaffold はさまざまなデバイスに応じてさまざまなウィンドウ サイズに適応し、動的にウィンドウ サイズを取得するメソッドは MediaQuery.of(context).size であるため、これはマルチターミナル開発中に発生する問題です * , これはデスクトップ側で開発する場合には非常に便利ですが、モバイル側でキーボードがポップアップする場合に問題が発生します。
パネルの高さが size を使用して強制的に定義されているが、ソフト キーボードがポップアップする場合、上にスライドしたときのフォームの高さもこれを使用して計算されるため、上にスライドした後、パネルはキーボードの位置を押し上げます。ソフトキーボードで頻繁に点滅するとポップアップ状態が維持されず、ページが更新され続けます。
強制的な配置を行いたい場合、window.physicalSize を使用するのが最善の方法です。モバイル端末上のフォームのサイズは変更されず、複数の端末に適応させるために、使用される最終的な幅は次のとおりです。 window .physicalSize.width / window.devicePixelRatio とし、resizeToAvoidBottomInset: false を Scaffold に追加して、小さな変位によって引き起こされるエラーを回避します
デスクトップ ソリューション
モバイル側の設定が完了すると、デスクトップ側で window.physicalSize が一度呼び出されます。ただし、デスクトップ上で window.physicalSize を使用し続ける場合、デスクトップをドラッグして拡大および縮小することができます。この時点では、パネルは元の高さを維持します。を動的に調整するには 2 つの方法があります。1 つはフォームにリスナーを追加し、フォームのサイズが変更されたときに window.physicalSize を再取得する方法で、最も簡単な方法は window を使い続けることです。 PhysicalSize、ただしグローバル変数に入れます
1 | ValueNotifier<double> windowsWidth = |
次に、build の最も外側の層、Saffold のすぐ外側で、MediaQuery.of(context).size を取得できる場所で値の変更が行われます。その後、他の層で値を変更する必要はありません。 Flutter はフォームが変更されると自動的に saffold を再構築するため、このとき、これら 2 つの値の変更が最初にトリガーされ、その後、レンダリング時に後続の値がトリガーされます。新しい値は自然に取得されるので、必要はありません。可能であれば、もう一度監視を実行しましょう。監視タスクには別のネストが必要です。さまざまなマトリョーシカ人形を見るのはあまりにも不快です。
1 | //当不是移动端的时候使用这个可以动态监听窗体变化 |
このようにして、モバイルとデスクトップの間の適応を最小限のコードで完了できます。
現在再生中のマットエフェクト
当初は、もっと「規律正しく」、上部と下部を AppBar と bottomSheet に移動したかったのですが、再生ページを作成しているときに考えが変わりました。下部のポップアップを作成するときに、ウィンドウ内で、AppBar と bottomSheet の間に挟まれるのではなく、全画面ページが直接ポップアップ表示されることを願っています。この方法では、たとえすりガラス効果があるとしても…実際はとてもいいのですが、うーん、私は強迫性障害を持っています…
この種の再生中のポップアップ ウィンドウは見苦しいと感じたので、暴力的なアイデアを続けて、再生コントロールの上部と下部を自分のコントロールに直接書き込み、同時に全画面効果を実現します。ポップアップページのボタンで並べ替えることができるので、さらにボタンを配置して移動します。
ここで設定しているのは**BoxDecoration(color: Colors.black.withOpacity(0.7))**で、実際には0.8程度に設定できると思います。
実装方法はStackを使って1層をカバーしてコードを見ます。
1 | Stack( |
### 歌詞
歌詞の実装には、pub 上の唯一の非常に優れたサードパーティ コンポーネント flutter_lyric: ^2.0.4+6 を使用します。実装は難しくありません。デモを作成してオンラインに公開します。ソース コードのサンプルをダウンロードして、それを読み込むことができます。歌詞自体は「描画」されているため、非常に安定しています。再生コントロールとプログレス バーは StreamBuilder を使用して取得するため、定義する必要があります。著者の例よりもはるかに少ないものがあります。
1 | var lyricModel = |
次に、initState に 2 行を追加します。
1 | lyricUI.highlight = true; //设置高亮 |
次に、歌詞読み取り UI の Widget をビルドし、必要な場所に配置します。
1 | Widget _buildReaderWidget() { |
この時点で、歌詞の問題は解決されています。後で別の normalLyric を渡すだけです。進行状況バーの値モニターに遭遇しないように注意する必要があります。そうしないと、そのままだと歌詞が点滅し続けます。ランニング。
現在のコントロールに問題があります。歌詞をドラッグして特定の文を見つけると、確かに [OK] をクリックして目的の位置を見つけることができますが、歌詞のスクロールが停止します。作者のデモでも同じことを見たので、後で解決する方法を確認するために、問題 を作者に提起しました。
となると、肝心なのは…歌詞を一括で見つける方法…NetEase CloudのAPIを使わないといけないかも…