DefaultTabController可以设计类似于今日头条顶部的滑动栏。
效果
注意,这里的闪屏是因为夜神模拟器的bug
注:闪屏是因为夜神模拟器的bug
代码解析
顶部的标题
return DefaultTabController(
length: 2,
child:Scaffold(
appBar: AppBar(
title:Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: "左边"),
Tab(text: "右边")
],
),
)
],
)
),
)
);
可以看到,这个模块是放在可以找到AppBar,并使用Expanded扩展出自己想要的效果
下方的内容,这里使用TabBarView对应内容,一个ListView对应一个界面,如第一个ListView这样写
body:TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title:Text("内容一")
),
ListTile(
title: Text("内容一"),
)
],
),
有几个滑动的标题,就写几个ListView即可
源代码
以下是全部代码
import 'package:flutter/material.dart';
import 'package:flutter_app/res/listData.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("左右切换"),
),
body: LayoutDemo()),
);
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child:Scaffold(
appBar: AppBar(
title:Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: "左边"),
Tab(text: "右边")
],
),
)
],
)
),
body:TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title:Text("内容一")
),
ListTile(
title: Text("内容一"),
)
],
),
ListView(
children: <Widget>[
ListTile(
title:Text("内容二")
),
ListTile(
title: Text("内容二"),
)
],
)
],
)
)
);
}
}