Flutter仿今日头条TabBar

​

1.实现底部BottomNavigationBar

Tabs.dart

import 'package:flutter/material.dart';

import 'package:newsscaffold/pages/tabs/Ixigua.dart';

import 'package:newsscaffold/pages/tabs/User.dart';

import 'package:newsscaffold/pages/tabs/VideoHall.dart';

import 'tabs/Home.dart';

class Tabs extends StatefulWidget {

final index;

Tabs({Key key,this.index=0}):super(key:key);

@override

_TabsState createState() => _TabsState(this.index);

}

class _TabsState extends State<Tabs> {

_TabsState(index){

this._currentIndex=index;

}

int _currentIndex ;

List _pageList = [HomePage(), IxiguaPage(), VideoHallPage(),UserPage()];

@override

Widget build(BuildContext context) {

return Scaffold(

// appBar: AppBar(

// // Here we take the value from the MyHomePage object that was created by

// // the App.build method, and use it to set our appbar title.

// title: Text("今日头条"),

// ),

body: this._pageList[this._currentIndex],

bottomNavigationBar: BottomNavigationBar(

currentIndex: this._currentIndex,

//图标大小

iconSize: 35,

//选中颜色

fixedColor: Colors.redAccent,

//底部可以设置多个按钮

type: BottomNavigationBarType.fixed,

onTap: (index) {

setState(() {

this._currentIndex = index;

});

},

items: [

BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),

BottomNavigationBarItem(icon: Icon(Icons.play_arrow), title: Text("西瓜视频")),

BottomNavigationBarItem(icon: Icon(Icons.slideshow), title: Text("放映厅")),

BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: Text("我的")),

]), // This trailing comma makes auto-formatting nicer for build methods.

);

}

}

Tabs.dart中的四个页面

2.Home.dart 将TabBar放在AppBar的title中

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{

List<Widget> _tabs = [

Tab(

text: "关注",

),

Tab(

text: "推荐",

),

Tab(

text: "热榜",

),

Tab(

text: "科技",

),

Tab(

text: "免费小说",

),

Tab(

text: "新时代",

),

Tab(

text: "抗疫",

),

Tab(

text: "问答",

),

Tab(

text: "数码",

),

Tab(

text: "要闻",

),

Tab(

text: "视频",

),

];

List<Widget> _tabBars = [Center(

child: Text('关注'),

),

Center(

child: Text('推荐'),

),

Center(

child: Text('热榜'),

),

Center(

child: Text('科技'),

),

Center(

child: Text('免费小说'),

),

Center(

child: Text('新时代'),

),

Center(

child: Text('抗疫'),

),

Center(

child: Text('问答'),

),

Center(

child: Text('数码'),

),

Center(

child: Text('要闻'),

),

Center(

child: Text('视频'),

),];

TabController _tabController;//注意 在TabBar和TabBarView中都需要配置controller

@override

void initState() {

super.initState();

_tabController = new TabController(vsync: this, length: this._tabs.length);

_tabController.index=1;

setState(() {

});

_tabController.addListener(() {

//通过监听实现自定义的功能

print(_tabController.index);

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Colors.white,

title: TabBar(

controller: this._tabController,

indicatorColor: Colors.redAccent,

labelColor: Colors.redAccent,

unselectedLabelColor: Colors.black,

isScrollable: true,

//和文字等宽

indicatorSize: TabBarIndicatorSize.label,

tabs: this._tabs,

),

),

body: TabBarView(children: this._tabBars,controller: this._tabController,),

);

}

}

Ixigua.dart

import 'package:flutter/material.dart';

class IxiguaPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Text('西瓜视频'),

);

}

}

VideoHall.dart

import 'package:flutter/material.dart';

class VideoHallPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Text('放映厅'),

);

}

}

User.dart

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Text('我的'),

);

}

}

程序入口

main.dart

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

//

// Try running your application with "flutter run". You'll see the

// application has a blue toolbar. Then, without quitting the app, try

// changing the primarySwatch below to Colors.green and then invoke

// "hot reload" (press "r" in the console where you ran "flutter run",

// or simply save your changes to "hot reload" in a Flutter IDE).

// Notice that the counter didn't reset back to zero; the application

// is not restarted.

primarySwatch: Colors.blue,

// This makes the visual density adapt to the platform that you run

// the app on. For desktop platforms, the controls will be smaller and

// closer together (more dense) than on mobile platforms.

visualDensity: VisualDensity.adaptivePlatformDensity,

),

debugShowCheckedModeBanner: false,

home: Tabs(index: 0,),

);

}

}

​