没有高效一说吧

来源: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的更新是比较频繁的,需要根据手势的滑动不停的刷新,在封装这个组件之前呢是整个布局刷新,
这个组件的封装主要是通过局部刷来提升页面渲染的性能的。
0
0

Flutter高级进阶实战-仿哔哩哔哩-掌握Flutter高阶技能

一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案

1723 学习 · 870 问题

查看课程