1
Newsvoiceは、下部バーの上にある画面の下部にスクロール可能なタブを表示します。このUIを実装するにはどうすればよいですか?おかげさまで ここ下部画面にスクロール可能なタブを実装する方法
Newsvoiceは、下部バーの上にある画面の下部にスクロール可能なタブを表示します。このUIを実装するにはどうすればよいですか?おかげさまで ここ下部画面にスクロール可能なタブを実装する方法
はスクロールTabBar
を位置決めするColumn
を使用しScaffold
のbottomNavigationBar
スロットでBottomNavigationBar
いくつかの例のコードです。 AnimatedCrossFadeを使用して2番目の( "オートバイ")画面を選択すると、タブが消えます。
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Navigation Example',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
const List<String> tabNames = const<String>[
'foo', 'bar', 'baz', 'quox', 'quuz', 'corge', 'grault', 'garply', 'waldo'
];
class _MyHomePageState extends State<MyHomePage> {
int _screen = 0;
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: tabNames.length,
child: new Scaffold(
appBar: new AppBar(
title: new Text('Navigation example'),
),
body: new TabBarView(
children: new List<Widget>.generate(tabNames.length, (int index) {
switch (_screen) {
case 0: return new Center(
child: new Text('First screen, ${tabNames[index]}'),
);
case 1: return new Center(
child: new Text('Second screen'),
);
}
}),
),
bottomNavigationBar: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new AnimatedCrossFade(
firstChild: new Material(
color: Theme
.of(context)
.primaryColor,
child: new TabBar(
isScrollable: true,
tabs: new List.generate(tabNames.length, (index) {
return new Tab(text: tabNames[index].toUpperCase());
}),
),
),
secondChild: new Container(),
crossFadeState: _screen == 0
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 300),
),
new BottomNavigationBar(
currentIndex: _screen,
onTap: (int index) {
setState(() {
_screen = index;
});
},
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.airplanemode_active),
title: new Text('Airplane'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.motorcycle),
title: new Text('Motorcycle'),
),
],
),
],
),
),
);
}
}
私はbottomNavigationBarは、ウィジェットのタイプを受け入れることを知りませんでした!私はAppBarのようないくつかの制限を期待していた。ありがとうございました。 –