写这篇文章的原因是因为我在开发过程中遇到了需要再tab上面有其他样式的的内容,但是在appBar中又无法做(个人不会写),百度了查了一天半,才根据一个属性完成了想要的效果,所以才有了这篇问题。
效果图
代码
红色为重点
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Container(
constraints: BoxConstraints.expand(
height: ScreenUtil().setHeight(80),
width: MediaQuery.of(context).size.width),
//设置背景图片
decoration: const BoxDecoration(
image: DecorationImage(
image:
AssetImage('lib/src/images/productSwitching/toubu.png'),
fit: BoxFit.fitWidth),
),
alignment: Alignment.center,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
actions: const [],
centerTitle: true,
automaticallyImplyLeading: false,
titleSpacing: 0,
title: const Text(
'设置',
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1),
fontSize: 16,
),
textAlign: TextAlign.center,
))),
),
body: Column(
children: [
Container(
child: Column(children: [
Stack(
children: [
Image(
image: const AssetImage(
'lib/src/images/productSwitching/dibu.png'),
height: ScreenUtil().setHeight(88),
width: ScreenUtil().setWidth(375),
fit: BoxFit.fitWidth,
),
Positioned(
bottom: 0,
left: 5,
child: Container(
// margin: const EdgeInsets.only(left: 5, right: 5),
padding: const EdgeInsets.only(left: 10, right: 10),
constraints: BoxConstraints.expand(
height: ScreenUtil().setHeight(72),
width: MediaQuery.of(context).size.width - 10),
//设置背景图片
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'lib/src/images/productSwitching/zixunjieshao.png'),
fit: BoxFit.fitWidth),
),
alignment: Alignment.center,
child: const Text(
' 我的走的太快,灵魂都跟不上了。低头需要有勇气,抬头需要有底气。事事有回应,件件有着落,凡事有交代。',
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
),
)
],
),
])),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: DefaultTabController(
length: 7,
child: Column(
children: [
TabBar(
labelColor: Color.fromRGBO(232, 19, 36, 1),
labelStyle: const TextStyle(fontWeight: FontWeight.bold),
unselectedLabelColor: const Color.fromRGBO(34, 34, 34, 1),
unselectedLabelStyle: const TextStyle(
fontWeight: FontWeight.normal, fontSize: 14),
indicatorColor: Colors.red,
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true, //多个按钮可以滑动
tabs: const <Widget>[
Tab(text: "1"),
Tab(text: "2"),
Tab(text: "2"),
Tab(text: "4"),
Tab(text: "5"),
Tab(text: "6"),
Tab(text: "7"),
],
onTap: (value) {
setState(() {
newsType = value;
curPage = 1;
pages = 1;
AllFunctionsFn();
// _cellForRowAllContent;
// _cellForRowComplianceForum;
});
},
),
Container(
height: MediaQuery.of(context).size.height - 300,
child: TabBarView(children: <Widget>[
ListView(
children: [
Container(
padding: const EdgeInsets.all(14),
height: MediaQuery.of(context).size.height,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba1'),
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Image(
image: const AssetImage(
'lib/src/images/datuhegui.png'),
height: ScreenUtil().setHeight(135),
),
Container(
height:
MediaQuery.of(context).size.height -
135,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba2'),
),
)
],
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Image(
image: const AssetImage(
'lib/src/images/datushalong.png'),
height: ScreenUtil().setHeight(135),
),
Container(
height:
MediaQuery.of(context).size.height -
135,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba3'),
),
)
],
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Image(
image: const AssetImage(
'lib/src/images/datuhongguan.png'),
height: ScreenUtil().setHeight(135),
),
Container(
height:
MediaQuery.of(context).size.height -
135,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba4'),
),
)
],
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Image(
image: const AssetImage(
'lib/src/images/kehudatu.png'),
height: ScreenUtil().setHeight(135),
),
Container(
height:
MediaQuery.of(context).size.height -
135,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba5'),
),
)
],
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Image(
image: const AssetImage(
'lib/src/images/daxiaobao.png'),
height: ScreenUtil().setHeight(135),
),
Container(
height:
MediaQuery.of(context).size.height -
135,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba6'),
),
)
],
),
)
],
),
ListView(
children: [
Container(
padding: const EdgeInsets.only(
left: 14, right: 14, top: 14, bottom: 14),
child: Column(
children: [
Container(
height:
MediaQuery.of(context).size.height,
child: EasyRefresh(
controller: _controller,
header: const ClassicHeader(),
footer: const ClassicFooter(),
onRefresh: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
curPage = 1;
});
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
await Future.delayed(
const Duration(seconds: 1));
if (!mounted) {
return;
}
setState(() {
if (curPage < pages) {
curPage += 1;
AllFunctionsFn();
}
});
_controller.finishLoad(
curPage >= pages
? IndicatorResult.noMore
: IndicatorResult.success);
},
child:Text('tba7'),
),
)
],
),
)
],
),
]))
],
),
),
),
],
));
}