やりたいこと
動的にタブを追加した後、その追加したタブを直ぐに表示させたいです。
事象
indexを変更しただけだと、タブ上はindexで指定したところに移動していますが、
中身が追加する前のままとなっています。
indexに合わせて、TabBarViewも変更する方法はないでしょうか?
ソース
参考サイトのソースを少し変更しています。
+ボタンで追加してもタブは追加されても、ページの内容が変わっていないことが確認できます。
スライドするとインジケータがいきなり飛びます。(追加する前のタブの位置に戻るといったほうが正解かも)
よろしくおねがいします。
Flutter
1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(new MaterialApp( 5 home: new CardStack(), 6 )); 7} 8 9class DynamicTabContent { 10 IconData icon; 11 String tooTip; 12 13 DynamicTabContent.name(this.icon, this.tooTip); 14} 15 16class CardStack extends StatefulWidget { 17 @override 18 _MainState createState() => new _MainState(); 19} 20 21class _MainState extends State<CardStack> with TickerProviderStateMixin { 22 List<DynamicTabContent> myList = new List(); 23 24 TabController _cardController; 25 26 TabPageSelector _tabPageSelector; 27 28 @override 29 void initState() { 30 super.initState(); 31 32 myList.add(new DynamicTabContent.name(Icons.favorite, "Favorited")); 33 myList.add(new DynamicTabContent.name(Icons.local_pizza, "local pizza")); 34 35 _cardController = new TabController(vsync: this, length: myList.length); 36 _tabPageSelector = new TabPageSelector(controller: _cardController); 37 } 38 39 @override 40 void dispose() { 41 _cardController.dispose(); 42 super.dispose(); 43 } 44 45 @override 46 Widget build(BuildContext context) { 47 return new Scaffold( 48 backgroundColor: Colors.grey[300], 49 appBar: new AppBar( 50 actions: <Widget>[ 51 new Padding( 52 padding: const EdgeInsets.all(1.0), 53 child: new IconButton( 54 icon: const Icon( 55 Icons.add, 56 size: 30.0, 57 color: Colors.white, 58 ), 59 tooltip: 'Add Tabs', 60 onPressed: () { 61 List<DynamicTabContent> tempList = new List(); 62 63 myList.forEach((dynamicContent) { 64 tempList.add(dynamicContent); 65 }); 66 67 setState(() { 68 myList.clear(); 69 }); 70 71 tempList.forEach((dynamicContent) { 72 myList.add(dynamicContent); 73 }); 74 75 if (tempList.length % 2 == 0) { 76 myList.add(new DynamicTabContent.name( 77 Icons.shopping_cart, "shopping cart")); 78 } else { 79 myList.add( 80 new DynamicTabContent.name(Icons.camera, "camera")); 81 } 82 83 setState(() { 84 _cardController = 85 new TabController(vsync: this, length: myList.length); 86 _tabPageSelector = 87 new TabPageSelector(controller: _cardController); 88 _cardController.index = myList.length - 1; 89 }); 90 }, 91 ), 92 ), 93 ], 94 title: new Text("Title Here"), 95 bottom: new PreferredSize( 96 preferredSize: const Size.fromHeight(10.0), 97 child: new Theme( 98 data: Theme.of(context).copyWith(accentColor: Colors.grey), 99 child: myList.isEmpty 100 ? new Container( 101 height: 30.0, 102 ) 103 : new Container( 104 height: 30.0, 105 alignment: Alignment.center, 106 child: _tabPageSelector, 107 ), 108 ))), 109 body: new TabBarView( 110 controller: _cardController, 111 children: myList.isEmpty 112 ? <Widget>[] 113 : myList.map((dynamicContent) { 114 return new Card( 115 child: new Container( 116 height: 450.0, 117 width: 300.0, 118 child: new IconButton( 119 icon: new Icon(dynamicContent.icon, size: 100.0), 120 tooltip: dynamicContent.tooTip, 121 onPressed: null, 122 )), 123 ); 124 }).toList(), 125 ), 126 ); 127 } 128} 129
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/09 11:33