1、部分导入模块:
// 部分导入,即仅仅导入 dart:ui 库里面的 Color 模块
import 'dart:ui' show Color;
import 'package:lib1/lib1.dart' show foo, bar;
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart'
hide NestedScrollView;
2、Flutter InkWell-水波纹效果:
InkWell(
borderRadius: BorderRadius.circular(8.0), // 圆角
splashColor: Colors.transparent, // 溅墨色(波纹色)
highlightColor: Colors.transparent, // 点击时的背景色(高亮色)
onTap: () {},// 点击事件
child: Container(),
);
实现:包一层 Material,将背景色设置在 Material中的color里
Material(
color: Colors.white,
child: InkWell(),
)
参考链接: https://www.jianshu.com/p/93e32915bb9e
3、wantKeepAlive:
Tab导航栏保持子页面状态。
children需要继承自 StatefulWidget;
children的state继承自AutomaticKeepAliveClientMixin;
class MessagePage extends StatefulWidget {
@override
_MessagePageState createState() => _MessagePageState();
}
class _MessagePageState extends State<MessagePage>
with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
new Expanded(child: new TabBarWidget()),
],
),
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
class TabBarWidget extends StatefulWidget {
@override
_TabBarWidgetState createState() => _TabBarWidgetState();
}
class _TabBarWidgetState extends State<TabBarWidget> {
final List<String> _tabValues = [
'动态',
'消息',
];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(
length: _tabValues.length, //Tab页数量
vsync: ScrollableState(), //动画效果的异步处理
);
_tabController.addListener(() {
print("_tabController.index的值:" + _tabController.index.toString());
setState(() {
// print("_tabController.index的值:"+_tabController.index.toString());
});
});
}
//当整个页面dispose时,记得把控制器也dispose掉,释放内存
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Color(0xffffffff),
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 50,
color: Color(0xffF9F9F9),
// color:Colors.red,
alignment: Alignment.center,
child: TabBar(
isScrollable: true,
indicatorColor: Color(0xffFF3700),
indicator: UnderlineTabIndicator(
borderSide:
BorderSide(color: Color(0xffFF3700), width: 2),
insets: EdgeInsets.only(bottom: 7)),
labelColor: Color(0xff333333),
unselectedLabelColor: Color(0xff666666),
labelStyle:
TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),
unselectedLabelStyle: TextStyle(fontSize: 16.0),
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
tabs: [
new Tab(
text: _tabValues[0],
),
new Tab(
text: _tabValues[1],
),
]),
),
new Align(
alignment: Alignment.centerLeft,
child: new Container(
margin: EdgeInsets.only(left: 15),
child: (_tabController.index == 1)
? Text(
"发现群",
style: TextStyle(fontSize: 16, color: Colors.black),
)
: new Container(),
),
),
new Align(
alignment: Alignment.centerRight,
child: new IconButton(
icon: new Image.asset("assets/images/message_setting.webp",
width: 30.0, height: 30.0),
onPressed: () {
// Routes .navigateTo(context, '${Routes.weiboPublishPage}');
},
),
),
],
),
new Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
new MessageDynamicPage(),
new MessageMsgPage()
],
),
)
],
),
));
}
}
4、使用NestedScrollViewRefreshIndicator代替RefreshIndicator,解决RefreshIndicatorNestedScrollView与冲突的问题
https://github.com/fluttercandies/extended_nested_scroll_view
5、SliverToBoxAdapter:
用作在slivers中包裹需要放在滚动列表中的元素。
const SliverToBoxAdapter({
Key key,
Widget child,
})
网友评论