Flutter - #45. BottomNavigationBar
15112 ワード
Flutter日記
注1:Flutter.dev - material - BottomNavigationBar class
BottomNavigationBar
注1:Flutter.dev - material - BottomNavigationBar class
BottomNavigationBar
名前の通り、画面下部にナビゲーション機能があるエリアです.
スマホでアプリを使うときは本当によく見かける機能です.クローンコードでたくさん作ったニンジンスーパー、クーボンなどの応用を見てみましょう.画面下部には、[ホーム]タブ、[検索]タブ、[ユーザ情報]タブなどがあり、これらのタブをクリックして別のページに移動します.
BottomNavigationBarに書き込む場合、required(必須)属性は1つしかありません.List形式の配列を加えればよい.
かっこにいくつかのBottomNavigationBarItemを入れてもリストできますgenerateなどのList builderを使用できます.ここではいくつかを別々に入れます.(公式サイトごとに加入しているので…)
BottomNavigationBarには少なくとも2つ以上のラベルが必要です.ラベルの数によってtype属性も変化し,そのうち3つは固定であり,4つ以上はシフトし始める.typeについては、コードの説明を参照してください.
コードの例で説明しましょう。
今日はやっと公式サイトの例題をそのままにしました.
1.まずは3つのタブページがある場合から見ます。タブが4つ未満の場合、BottomNavigationBarのtypeプロパティのデフォルト値はBottomNavigationBarTypeです。固定します。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
// 탭을 이동할 때 쓸 변수!
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 40, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
// 아랫줄을 쓰지 않아도 탭이 4개 미만인 경우 기본으로 설정된다.
// type: BottomNavigationBarType.fixed,
// selectedItemColor: Colors.amber[800],
// unselectedItemColor: Colors.blue,
// backgroundColor: Colors.black,
),
);
}
}
一番下の3行の注釈は色適用部分で、実行画面を見ればわかります.
アノテーションを適用する色なしアノテーション色
上記のようにselectedItemColorはタブを選択したときの色で、設定されていない場合はColorSchemeです.[原色](Colors.blue)を適用します.backgroundColorをセットしないとホワイト(opaquewhite)!
BottomNavigationBarItemは、iconプロパティとlabelプロパティがそれぞれタブに表示されるアイコンと文のリスト形式です.
タブを移動するには、選択したタブに移動するにはcurrendIndexプロパティを変更する必要があります.
ここで、selectedIndexという変数を宣言してインデックスの変化を格納し、currentIndexに値を書き込みます.(タブのインデックスは一番左から0、1、2、3...)
selectedIndexはonTapプロパティで変更されます.コードには関数が単独で記述されており、下図に示すように、属性に直接関数を記述することができます.onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
今はBottomNavigationBartypeプロパティをテストするため、4つのタブを作成します.
2.ラベルが4つ以上の場合、BottomNavigationBarのtype属性のデフォルト値はBottomNavigationBarTypeです。移動します。
上のコードにはsettingsラベルのみが追加されています.運転画面を直接見てみましょう.
アノテーションを適用する色なしアノテーション色
何色も使わないとラベルが見えません.shiftを適用する場合、selectedItemColorが設定されていない場合は白に設定され、backgroundColorも白になります.
色を設定すると、タブが少し上に表示されます.タイプ変換!動いているからです.これが気に入らない場合はtypeプロパティをfixedに設定できます.
backgroonColorはBarItemごとに個別に設定できます.ただし、タイプが変わると、BottomNavigationBarレベルでbackgroundColorが設定されていますが、食べません.最初のBarItemにのみBackgroundColorを黒に設定し、Bar全体に適用されることを確認します(なぜですか?)
固定する場合は、BottomNavigationBarレベルでbackgroundColorを設定するとよく適用されます.このままでは
これでTextコンポーネントのみが表示され、onTapでNavigatorを使用して他のページも表示できます!
さらにbottomNavigationBarではBottomNavigationBarの他にTabBarも使えますBottomNavigationBarの方が多い気がしますがTabBarの場合は次回...
今日の日記はここまで!
Reference
この問題について(Flutter - #45. BottomNavigationBar), 我々は、より多くの情報をここで見つけました
https://velog.io/@sharveka_11/BottomNavigationBar
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
かっこにいくつかのBottomNavigationBarItemを入れてもリストできますgenerateなどのList builderを使用できます.ここではいくつかを別々に入れます.(公式サイトごとに加入しているので…)
BottomNavigationBarには少なくとも2つ以上のラベルが必要です.ラベルの数によってtype属性も変化し,そのうち3つは固定であり,4つ以上はシフトし始める.typeについては、コードの説明を参照してください.
コードの例で説明しましょう。
今日はやっと公式サイトの例題をそのままにしました.
1.まずは3つのタブページがある場合から見ます。タブが4つ未満の場合、BottomNavigationBarのtypeプロパティのデフォルト値はBottomNavigationBarTypeです。固定します。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
// 탭을 이동할 때 쓸 변수!
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 40, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
// 아랫줄을 쓰지 않아도 탭이 4개 미만인 경우 기본으로 설정된다.
// type: BottomNavigationBarType.fixed,
// selectedItemColor: Colors.amber[800],
// unselectedItemColor: Colors.blue,
// backgroundColor: Colors.black,
),
);
}
}アノテーションを適用する色なしアノテーション色
上記のようにselectedItemColorはタブを選択したときの色で、設定されていない場合はColorSchemeです.[原色](Colors.blue)を適用します.backgroundColorをセットしないとホワイト(opaquewhite)!
BottomNavigationBarItemは、iconプロパティとlabelプロパティがそれぞれタブに表示されるアイコンと文のリスト形式です.
タブを移動するには、選択したタブに移動するにはcurrendIndexプロパティを変更する必要があります.
ここで、selectedIndexという変数を宣言してインデックスの変化を格納し、currentIndexに値を書き込みます.(タブのインデックスは一番左から0、1、2、3...)
selectedIndexはonTapプロパティで変更されます.コードには関数が単独で記述されており、下図に示すように、属性に直接関数を記述することができます.
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},2.ラベルが4つ以上の場合、BottomNavigationBarのtype属性のデフォルト値はBottomNavigationBarTypeです。移動します。
上のコードにはsettingsラベルのみが追加されています.運転画面を直接見てみましょう.
アノテーションを適用する色なしアノテーション色
何色も使わないとラベルが見えません.shiftを適用する場合、selectedItemColorが設定されていない場合は白に設定され、backgroundColorも白になります.
色を設定すると、タブが少し上に表示されます.タイプ変換!動いているからです.これが気に入らない場合はtypeプロパティをfixedに設定できます.
backgroonColorはBarItemごとに個別に設定できます.ただし、タイプが変わると、BottomNavigationBarレベルでbackgroundColorが設定されていますが、食べません.最初のBarItemにのみBackgroundColorを黒に設定し、Bar全体に適用されることを確認します(なぜですか?)
固定する場合は、BottomNavigationBarレベルでbackgroundColorを設定するとよく適用されます.このままでは
これでTextコンポーネントのみが表示され、onTapでNavigatorを使用して他のページも表示できます!
さらにbottomNavigationBarではBottomNavigationBarの他にTabBarも使えますBottomNavigationBarの方が多い気がしますがTabBarの場合は次回...
今日の日記はここまで!
Reference
この問題について(Flutter - #45. BottomNavigationBar), 我々は、より多くの情報をここで見つけました https://velog.io/@sharveka_11/BottomNavigationBarテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol