Flutter —— 左右切换视图
import 'package:flutter/material.dart';
import 'package:ks/pageone.dart';
import 'package:ks/pagetwo.dart';
class TestPage extends StatefulWidget {
@override
_FriendsListState createState() => _FriendsListState();
}
class _FriendsListState extends State<TestPage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(initialIndex: 0, length: 2, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
toolbarHeight: 80,
title: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 40,
child: Text("拍立送"),
alignment: Alignment.center,
),
Container(
height: 40,
alignment: Alignment.topLeft,
child: TabBar(
tabs: [
Tab(text: '全球精选'),
Tab(text: '拍立送'),
],
controller: _tabController,
indicatorWeight: 3,
indicatorPadding: EdgeInsets.only(left: 10, right: 10),
labelPadding: EdgeInsets.symmetric(horizontal: 10),
isScrollable: true,
indicatorColor: Color(0xffFF7E98),
labelColor: Color(0xffFF7E98),
labelStyle: TextStyle(
fontSize: 25,
color: Color(0xffFF7E98),
fontWeight: FontWeight.w500,
),
unselectedLabelColor: Color(0xffAAAAAA),
unselectedLabelStyle:
TextStyle(fontSize: 20, color: Color(0xffAAAAAA)),
indicatorSize: TabBarIndicatorSize.label,
)),
],
),
elevation: 0,
),
body: TabBarView(
children: [
Container(
child: PageOne(),
),
Container(
child: PageTwo(),
),
],
controller: _tabController,
),
),
);
}
}
