没有高效一说吧
来源:10-6 高效的组件HiFlexibleHeader封装

苏泊尔漫也要按时吃饭
2024-01-29
import 'package:flutter/material.dart';
import 'package:tabbar_test/widget/hi_blur.dart';
class ProfilePage extends StatefulWidget {
const ProfilePage({super.key});
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
final List tabs = [1, 2, 3, 1, 3, 2, 1, 3, 5];
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 160,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.parallax,
titlePadding: const EdgeInsets.only(left: 0),
expandedTitleScale: 1.5,
title: _buildTitle(),
background: Stack(
children: [
Positioned.fill(
child: Image.asset(
'images/meinv.png',
fit: BoxFit.fill,
)),
const Positioned.fill(
child: HiBlur(
sigmaX: 5,
sigmaY: 5,
))
],
),
),
)
];
},
body: ListView.builder(
itemCount: tabs.length,
padding: EdgeInsets.zero,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('index = ${index}'),
);
})),
);
}
_buildTitle() {
return Container(
padding: const EdgeInsets.only(bottom: 10, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
color: Colors.grey,
width: 40,
height: 40,
child: Image.asset(
'images/logo.png',
fit: BoxFit.scaleDown,
),
),
),
const Padding(
padding: EdgeInsets.only(left: 5),
child: Text('用户名',
style: TextStyle(fontSize: 14, color: Colors.black87)))
],
),
);
}
}
只是const EdgeInsets.only(bottom: 10, left: 20),中bottom改变了,在flutter中widget树比对的时候,类型也没变,更新也只是更新Padding,和你把那个单独抽出来不是一样的么?
写回答
1回答
-
CrazyCodeBoy
2024-07-16
header的更新是比较频繁的,需要根据手势的滑动不停的刷新,在封装这个组件之前呢是整个布局刷新,
这个组件的封装主要是通过局部刷来提升页面渲染的性能的。00
相似问题