わからないこと
Class Under Tab…の記述をどこにすればいいのかが分からないです。
(ナビを、リストと同じ画面に表示させる方法がわからないです。)
Class UnderTab…の記述位置が間違っているのかもしれません。
前回、回答いただいたコードの下に、Class Under Tab…を記述しているのですが、画面下部にナビが表示されないので、どこにClass UnderTabを記述すればいいのかを教えていただけると幸いです。。
実現したいこと
画面下部にナビゲーションメニューとリストを同画面に表示させたいです。
3日前に、投稿させていただいたもの(一対一対応のリスト)とナビゲーションメニューを同じ画面に表示させたいと考えております。(今はなぜかリストのみが表示されてしまいます)
リストの方は、文字数の都合上、載せることができませんでした。恐れ入りますが、前回ご回答してくださった方のコードを参照していただけると助かります。
flutter
1前回のコード+ 2 3class UnderTab extends StatefulWidget { 4 @override 5 _UnderTabState createState() => _UnderTabState(); 6} 7 8// SingleTickerProviderStateMixinを使用 9class _UnderTabState extends State<UnderTab> 10 with SingleTickerProviderStateMixin { 11 // ページ切り替え用のコントローラを定義 12 PageController _pageController; 13 14 // ページインデックス保存用 15 int _screen = 0; 16 17 // ページ下部に並べるナビゲーションメニューの一覧 18 List<BottomNavigationBarItem> myBottomNavBarItems() { 19 return [ 20 BottomNavigationBarItem( 21 icon: Icon(Icons.book), 22 title: const Text('Book'), 23 ), 24 BottomNavigationBarItem( 25 icon: Icon(Icons.cloud), 26 title: const Text('Cloud'), 27 ), 28 BottomNavigationBarItem( 29 icon: Icon(Icons.cake), 30 title: const Text('Cake'), 31 ), 32 ]; 33 } 34 35 @override 36 void initState() { 37 super.initState(); 38 // コントローラ作成 39 _pageController = PageController( 40 initialPage: _screen, // 初期ページの指定. 41 ); 42 } 43 44 @override 45 void dispose() { 46 // コントローラ破棄 47 _pageController.dispose(); 48 super.dispose(); 49 } 50 51 @override 52 Widget build(BuildContext context) { 53 return Scaffold( 54 backgroundColor: Colors.blue[900], 55 // Appbar 56 appBar: AppBar( 57 backgroundColor: Colors.blue[900], 58 title: Text( 59 'BottomNav', 60 style: TextStyle(fontSize: 16), 61 ), 62 ), 63 // ), 64 // ページビュー 65 body: PageView( 66 controller: _pageController, 67 onPageChanged: (index) { 68 setState(() { 69 // ページインデックスを更新 70 _screen = index; 71 }); 72 }, 73 // ページ下部のナビゲーションメニューに相当する各ページビュー。後述 74 children: [ 75 BookScreen(), 76 CloudScreen(), 77 CakeScreen(), 78 ]), 79 // ページ下部のナビゲーションメニュー 80 bottomNavigationBar: BottomNavigationBar( 81 // 現在のページインデックス 82 currentIndex: _screen, 83 // onTapでナビゲーションメニューがタップされた時の処理を定義 84 onTap: (index) { 85 setState(() { 86 // ページインデックスを更新 87 _screen = index; 88 _pageController.animateToPage(index, 89 duration: Duration(milliseconds: 300), curve: Curves.easeOut); 90 }); 91 }, 92 items: myBottomNavBarItems(), 93 ), 94 ); 95 } 96}
BookScreen.dart,CloudScreen.dart,CakeScreen.dartも用意してみました
flutter
1//BookScreen.dart 2import 'package:flutter/material.dart'; 3 4class BookScreen extends StatelessWidget { 5 // This widget is the root of your application. 6 @override 7 Widget build(BuildContext context) { 8 return Scaffold( 9 backgroundColor: Colors.green[100], 10 // Appbar 11 appBar: AppBar( 12 backgroundColor: Colors.green[100], 13 title: Text( 14 'Book', 15 style: TextStyle(fontSize: 16), 16 ), 17 ), 18 body: Center(child: Icon(Icons.book))); 19 } 20}
文字数の関係から、CloudScreenとCakeScreenは省略させていただきます。
(BookScreenとちがうのは色だけです)
もしかすると、超初歩的な質問かもしれませんが回答よろしくお願いします(T.T)
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー