今天是2023-12-21，项目第二天
为了动态头像上传的一个gif图，操作方式参考
ok，开始正文；
下一步，首页的代码编写；
分析页面
创建了 SummaryPage.dart, 贴图分析下页面构造：
从上至下实现的需求和步骤为：
-
实现一个滚动条，固定的标题，包含7个，【关注，软件，最新，推荐，问答，博客，英文】，当前页字体放大，跟下面的页面联动，下方滑动页面，上方标题跟着改变；
-
最右侧加入一个搜索按钮，点击进入搜索页；
-
实现一个带圆角的轮播图，同时显示标题和一排指示点；
-
实现一个List滚动视图，每行单元元素包含，标签，标题，作者，日期，评价数，如带图片在右侧显示图片；
实现一个滚动条
使用的TabController + AppBar + TabBar + TabBarView；
参考文档：
-
Flutter仿今日头条TabBar juejin.cn/post/691384…
-
flutter 使用IconButton引用本地图片做点击事件 www.jianshu.com/p/8a4b1fd57…
-
flutter布局-appbar导航栏和状态栏 juejin.cn/post/684490…
-
Flutter 系列（五）：Flutter 常用按钮 Widget juejin.cn/post/713708…
遇到的问题
- AppBar 出现阴影和下划线。
- 有两种方式解决下划线，在
main.dart文件找到定义theme处:
theme: ThemeData( primaryColor: themeColor, //PlanA 不用新样式 useMaterial3: false, //planB 下划线设为透明 tabBarTheme: const TabBarTheme(dividerColor: Colors.transparent) ),- 解决阴影，useMaterial3为true是默认没有阴影，可以自己试试；
appBar: AppBar( backgroundColor: Colors.white, // MaterialApp 的 ThemeData设置useMaterial3为true会去掉阴影 // 设置false去掉下划线会显示阴影，需要设置阴影高度elevation为0 elevation: 0, - 有两种方式解决下划线，在
ImageIcon设置读取本地图片然后赋值给到 IconButton 后，运行不显示，通过Flutter DevTools查看元素属性，发现，默认color是白色，因此在白色背景下，不会显示；需自己设置一个颜色；
IconButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => const SearchPage()));
},
icon: const ImageIcon(
AssetImage("assets/images/ic_search.png") ,
//ImageIcon 默认为白色，需设置为想要的颜色
color: Colors.black,
),
)
实现效果
完整代码
import 'package:flutter/material.dart';
import 'package:hello_oschina/pages/SearchPage.dart';
class SummaryPage extends StatefulWidget {
@override
State<SummaryPage> createState() => _SummaryPageState();
}
class _SummaryPageState extends State<SummaryPage> with SingleTickerProviderStateMixin {
final List<Tab> _tabs = <Tab>[
const Tab(text: "关注"),
const Tab(text: "软件"),
const Tab(text: "最新"),
const Tab(text: "推荐"),
const Tab(text: "问答"),
const Tab(text: "博客"),
const Tab(text: "英文"),
];
final List<Widget> _tabBars = [
const Center(child: Tab(text: "关注")),
const Center(child: Tab(text: "软件")),
const Center(child: Tab(text: "最新")),
const Center(child: Tab(text: "推荐")),
const Center(child: Tab(text: "问答")),
const Center(child: Tab(text: "博客")),
const Center(child: Tab(text: "英文")),
];
late TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: _tabs.length, vsync: this);
_tabController.index = 2;
setState(() {
});
//监听器
_tabController.addListener(() {
//点击切换tab的时候执行了一个动画效果，滑动切换的时候是没有的，在这个过程中触发了一次Listener,所以触发了两次addListener方法
// 解决点击tab执行2次的问题
if(_tabController.index ==_tabController.animation?.value) {
//实现自定义的功能
print(_tabController.index);
}
});
}
void pressSearchButton(){
print("go search page");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
// MaterialApp 的 ThemeData设置useMaterial3为true会去掉阴影
// 设置false去掉下划线会显示阴影，需要设置阴影高度elevation为0
elevation: 0,
title: TabBar(
controller: _tabController,
indicatorColor: Colors.transparent,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
isScrollable: true,
tabs: _tabs,
labelStyle: const TextStyle(fontSize: 24.0,fontWeight: FontWeight.w900),
unselectedLabelStyle: const TextStyle(fontSize: 14.0,fontWeight: FontWeight
.w900),
),
actions: <Widget>[
IconButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => const SearchPage()));
},
icon: const ImageIcon(
AssetImage("assets/images/ic_search.png") ,
//ImageIcon 默认为白色，需设置为想要的颜色
color: Colors.black,
),
)
],
),
body: TabBarView(
controller: _tabController,
children: _tabBars,
),
);
}
}
以上；
