記事ディレクトリ
I.はじめに
convex_bottom_barFlutterのボトムナビゲーションバーパッケージで、バージョン番号は3.2.0です。これを使用すると、上げ底ナビゲーション バーを簡単に作成できます。このパッケージのデザインは Google のマテリアル デザイン ガイドラインからインスピレーションを得ていますが、開発者がナビゲーション バーの外観と動作を簡単に調整できるようにする多くのカスタマイズ オプションも提供します。
この記事のハイライト:
convex_bottom_barの主な機能について学びます- インストールと構成の方法を学ぶ
- 基本的な使用法とカスタムテーマのスタイルを確認する
- 個別の隆起ボタンとカスタム タブ スタイルを作成する方法を学習します。
より多くのヒントやベストプラクティスを活用して Flutter のエキスパートになりたいと思っていますか? 素晴らしいニュースがあります! ゼロからワンまでのフラッター基本エントリーから全体戦略の応用ラインまで、皆様のご参加をお待ちしております！このコラムには、コードサンプルや詳細な分析など、Flutter を学習するために必要なすべてのリソースが含まれています。コラムの内容は今後も更新され、それに応じて価格も上昇していきます。今すぐ登録して、お得な価格でお楽しみください! さらに、専用のディスカッション グループもあります。ここをクリックしてディスカッション グループに参加し、他の Flutter 学習者とコミュニケーションを取り、学習することができます。今日から Flutter 学習の旅を始めましょう!
2. インストールと構成
始めるにはconvex_bottom_bar、それをプロジェクトの依存関係に追加する必要があります。インストールと構成の手順は次のとおりです。
-
依存関係を追加する:プロジェクトの
pubspec.yamlファイルに、次のコードを追加します。dependencies: convex_bottom_bar: ^3.2.0 -
パッケージを取得する:コマンドを実行して
flutter pub getパッケージをダウンロードします。 -
パッケージのインポート:使用するファイルに
convex_bottom_bar、次のインポート ステートメントを追加します。import 'package:convex_bottom_bar/convex_bottom_bar.dart';
convex_bottom_bar上記の手順を完了すると、上げ底ナビゲーション バーの作成に使用できるようになります。
3. 基本的な使い方とカスタムテーマのスタイル
下部のナビゲーションバーの作成は、を使用するとconvex_bottom_bar非常に簡単です。
基本的な例を次に示します。
Scaffold(
bottomNavigationBar: ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
TabItem(icon: Icons.add, title: 'Add'),
TabItem(icon: Icons.message, title: 'Message'),
TabItem(icon: Icons.people, title: 'Profile'),
],
onTap: (int i) => print('click index=$i'),
)
);
AppBar の背景、色、高さをカスタマイズすることもできます。例:
ConvexAppBar(
style: TabStyle.react,
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
],
backgroundColor: Colors.blue,
height: 60,
)
これらのオプションを使用すると、プロジェクトのニーズに合った下部ナビゲーション バーを簡単に作成できます。
これは、Xiaoyu Youthが2023年にCSDNで公開したブログです。収集ステーションの著作権侵害が横行しているため、CSDNでこの記事が見つからない場合は、CSDNを通じて私に連絡してください。サポートありがとうございます~
4. ボタンとスタイルフック
1. 単一ボタンの使用
隆起したボタンが 1 つだけ必要な場合は、それで機能しますConvexButton。以下に例を示します。
Scaffold(
appBar: AppBar(title: const Text('ConvexButton Example')),
body: Center(child: Text('count $count')),
bottomNavigationBar: ConvexButton.fab(
onTap: () => setState(() => count++),
),
);
2. カスタム スタイル フック
convex_bottom_barStyleHookタブのスタイルをカスタマイズできるAPIも提供されています。以下に例を示します。
StyleProvider(
style: Style(),
child: ConvexAppBar(
initialActiveIndex: 1,
height: 50,
top: -30,
curveSize: 100,
style: TabStyle.fixedCircle,
items: [
TabItem(icon: Icons.link),
TabItem(icon: Icons.import_contacts),
TabItem(title: "2020", icon: Icons.work),
],
backgroundColor: _tabBackgroundColor,
),
);
class Style extends StyleHook {
double get activeIconSize => 40;
double get activeIconMargin => 10;
double get iconSize => 20;
TextStyle textStyle(Color color) {
return TextStyle(fontSize: 20, color: color);
}
}
このフックには制限があり、指定した寸法が内部スタイルと一致しない場合はオーバーフロー エラーが発生する可能性があることに注意してください。
5. 右から左へのサポートとカスタム例
1.RTLのサポート
convex_bottom_barRTL (右から左) のテキスト方向は内部的にサポートされています。DirectionalityRTL と LTR は次の方法で設定できます。
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(body: ConvexAppBar(/*TODO ...*/)),
);
2.カスタム例
デフォルトのスタイルがニーズを満たさない場合は、次ConvexAppBar.builder()のコマンドを使用してほぼすべてのタブ機能を作成できます。
Scaffold(
bottomNavigationBar: ConvexAppBar.builder(
count: 5,
backgroundColor: Colors.blue,
itemBuilder: Builder(),
)
);
// 用户定义的类
class Builder extends DelegateBuilder {
Widget build(BuildContext context, int index, bool active) {
return Text('TAB $index');
}
}
6. まとめ
convex_bottom_barこれは強力で柔軟な Flutter ボトム ナビゲーション バー パッケージで、バージョン番号は 3.2.0 です。この記事を通じて、パッケージをインストールして構成する方法と、その豊富な機能とカスタマイズ オプションを使用して上げ底ナビゲーション バーを作成する方法を学びました。
Flutter について興味があり、さらに詳しく知りたいですか? それなら、Flutter のゼロから 1 までの基本入門からアプリケーション起動ガイドが最適です。ここでは、コードサンプルや詳細な分析を含む、包括的な Flutter 学習リソースを見つけることができます。Flutter を使ってアプリを構築する方法を知りたいですか? すべての答えはコラムにあります。コラムの内容は今後も更新され、価格もそれに応じて増加しますので、もうご遠慮ください。今すぐ登録して、お得な価格でお楽しみください! 一緒に Flutter の世界を探検しましょう! もっと知りたい？Flutter Developer 101 Getting Started ブックレットのコラム ガイドを参照するには、ここをクリックしてください。さらに、専用のディスカッション グループもあります。ここをクリックしてディスカッション グループに参加し、他の Flutter 学習者とコミュニケーションを取り、学習することができます。