Blog

简单学习了一下garageband

CustomScrollView 是 Flutter 中用于构建复杂滚动效果的核心组件，它允许将多个不同类型的滚动组件（如列表、网格、图片等）组合成一个统一的滚动视图，并共享同一个滚动轴，实现连贯的滚动体验。
核心特点
支持组合多种 Sliver 组件（如 SliverList、SliverGrid、SliverAppBar 等）
所有子组件共享同一个滚动状态，滚动行为连贯
可实现复杂交互效果（如滚动时导航栏变化、视差效果、粘性头部等）
性能优化：仅构建可视区域内的组件，适合长列表或复杂滚动场景
基本用法
CustomScrollView 的核心是 slivers 属性，它接收一个 List，其中每个元素必须是 Sliver 类型组件（名称以 Sliver 开头的组件）。

import ‘package:flutter/material.dart’;

class MyCustomScrollView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
// 1. 可折叠的导航栏（滚动时会变化）
SliverAppBar(
title: Text(‘CustomScrollView Demo’),
expandedHeight: 200, // 展开时的高度
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
‘https://picsum.photos/800/400’,
fit: BoxFit.cover,
),
),
floating: true, // 滚动时快速显示
pinned: true, // 导航栏始终固定在顶部
),

// 2. 固定高度的组件（通过 SliverToBoxAdapter 包裹普通 Widget）
SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.all(16),
child: Text(‘以下是列表内容：’, style: TextStyle(fontSize: 18)),
),
),

// 3. 列表（SliverList）
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text(‘列表项 ${index + 1}’),
),
childCount: 20, // 列表项数量
),
),

// 4. 网格（SliverGrid）
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 每行2列
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 1.5, // 宽高比
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
color: Colors.blue[100 * (index % 9 + 1)],
child: Center(child: Text(‘网格项 ${index + 1}’)),
),
childCount: 10, // 网格项数量
),
),
],
),
);
}
}

常用 Sliver 组件
SliverAppBar：可滚动的导航栏，支持展开 / 折叠、视差效果等。
SliverList：类似 ListView，用于展示线性列表。
SliverGrid：类似 GridView，用于展示网格布局。
SliverToBoxAdapter：将普通 Widget 转换为 Sliver 组件（用于插入非滚动组件）。
SliverPadding：为子 Sliver 组件添加内边距。
SliverPersistentHeader：粘性头部（滚动时固定在顶部或指定位置）。
SliverSafeArea：适配设备安全区域（如刘海屏）。
关键属性
slivers：List 类型，存放所有 Sliver 子组件（核心属性）。
scrollDirection：滚动方向（默认垂直 Axis.vertical，可选水平 Axis.horizontal）。
reverse：是否反向滚动（默认 false）。
controller：ScrollController 类型，用于控制滚动位置、监听滚动事件。
physics：滚动物理效果（如 AlwaysScrollableScrollPhysics、NeverScrollableScrollPhysics 等）。
适用场景
需组合列表、网格、图片等多种滚动元素的页面（如首页、详情页）。
需实现复杂滚动交互（如滚动时导航栏渐变、粘性分类标题）。
需优化长列表性能（利用 Sliver 的懒加载特性）。
注意事项
所有子组件必须是 Sliver 类型，普通 Widget 需用 SliverToBoxAdapter 包裹。
SliverList 和 SliverGrid 的 delegate 推荐使用 SliverChildBuilderDelegate，实现懒加载（只构建可见项）。
与 NestedScrollView 配合可实现嵌套滚动（如列表中嵌套另一个滚动视图）。

通过 CustomScrollView，可以灵活构建各种复杂的滚动布局，兼顾性能与交互体验。

CustomScrollView 是 Flutter 中用于构建复杂滚动效果的核心组件，它允许将多个不同类型的滚动组件（如列表、网格、图片等）组合成一个统一的滚动视图，并共享同一个滚动轴，实现连贯的滚动体验。
核心特点
支持组合多种 Sliver 组件（如 SliverList、SliverGrid、SliverAppBar 等）
所有子组件共享同一个滚动状态，滚动行为连贯
可实现复杂交互效果（如滚动时导航栏变化、视差效果、粘性头部等）
性能优化：仅构建可视区域内的组件，适合长列表或复杂滚动场景
基本用法
CustomScrollView 的核心是 slivers 属性，它接收一个 List，其中每个元素必须是 Sliver 类型组件（名称以 Sliver 开头的组件）。

import ‘package:flutter/material.dart’;

class MyCustomScrollView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
// 1. 可折叠的导航栏（滚动时会变化）
SliverAppBar(
title: Text(‘CustomScrollView Demo’),
expandedHeight: 200, // 展开时的高度
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
‘https://picsum.photos/800/400’,
fit: BoxFit.cover,
),
),
floating: true, // 滚动时快速显示
pinned: true, // 导航栏始终固定在顶部
),

// 2. 固定高度的组件（通过 SliverToBoxAdapter 包裹普通 Widget）
SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.all(16),
child: Text(‘以下是列表内容：’, style: TextStyle(fontSize: 18)),
),
),

// 3. 列表（SliverList）
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text(‘列表项 ${index + 1}’),
),
childCount: 20, // 列表项数量
),
),

// 4. 网格（SliverGrid）
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 每行2列
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 1.5, // 宽高比
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
color: Colors.blue[100 * (index % 9 + 1)],
child: Center(child: Text(‘网格项 ${index + 1}’)),
),
childCount: 10, // 网格项数量
),
),
],
),
);
}
}

常用 Sliver 组件
SliverAppBar：可滚动的导航栏，支持展开 / 折叠、视差效果等。
SliverList：类似 ListView，用于展示线性列表。
SliverGrid：类似 GridView，用于展示网格布局。
SliverToBoxAdapter：将普通 Widget 转换为 Sliver 组件（用于插入非滚动组件）。
SliverPadding：为子 Sliver 组件添加内边距。
SliverPersistentHeader：粘性头部（滚动时固定在顶部或指定位置）。
SliverSafeArea：适配设备安全区域（如刘海屏）。
关键属性
slivers：List 类型，存放所有 Sliver 子组件（核心属性）。
scrollDirection：滚动方向（默认垂直 Axis.vertical，可选水平 Axis.horizontal）。
reverse：是否反向滚动（默认 false）。
controller：ScrollController 类型，用于控制滚动位置、监听滚动事件。
physics：滚动物理效果（如 AlwaysScrollableScrollPhysics、NeverScrollableScrollPhysics 等）。
适用场景
需组合列表、网格、图片等多种滚动元素的页面（如首页、详情页）。
需实现复杂滚动交互（如滚动时导航栏渐变、粘性分类标题）。
需优化长列表性能（利用 Sliver 的懒加载特性）。
注意事项
所有子组件必须是 Sliver 类型，普通 Widget 需用 SliverToBoxAdapter 包裹。
SliverList 和 SliverGrid 的 delegate 推荐使用 SliverChildBuilderDelegate，实现懒加载（只构建可见项）。
与 NestedScrollView 配合可实现嵌套滚动（如列表中嵌套另一个滚动视图）。

通过 CustomScrollView，可以灵活构建各种复杂的滚动布局，兼顾性能与交互体验。

Slivers的种类
SliverList
SliverGrid
SliverAppBar
SliverToBoxAdapter
SliverFillRemaining
SliverFillViewport

Error: /opt/homebrew/Cellar/ruby/3.4.7/lib/ruby/3.4.0/bundled_gems.rb:82:in 'Kernel.require': linked to incompatible
/Users/sihic/.rbenv/versions/3.4.7/lib/libruby.3.4.dylib -
/Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/msgpack-1.8.0/lib/msgpack/msgpack.bundle (LoadError)
from /opt/homebrew/Cellar/ruby/3.4.7/lib/ruby/3.4.0/bundled_gems.rb:82:in 'block (2 levels) in Kernel#replace_require'
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/msgpack-1.8.0/lib/msgpack.rb:7:in ''
from /opt/homebrew/Cellar/ruby/3.4.7/lib/ruby/3.4.0/bundled_gems.rb:82:in 'Kernel.require'
from /opt/homebrew/Cellar/ruby/3.4.7/lib/ruby/3.4.0/bundled_gems.rb:82:in 'block (2 levels) in Kernel#replace_require'
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/bootsnap-1.18.6/lib/bootsnap/load_path_cache/store.rb:5:in 'block in '
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/bootsnap-1.18.6/lib/bootsnap/explicit_require.rb:50:in
'Bootsnap::ExplicitRequire.with_gems'
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/bootsnap-1.18.6/lib/bootsnap/load_path_cache/store.rb:5:in ''
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/bootsnap-1.18.6/lib/bootsnap/load_path_cache.rb:77:in 'Kernel#require_relative'
from /Users/sihic/sites/haas/vendor/bundle/ruby/3.4.0/gems/bootsnap-1.18.6/lib/bootsnap/load_path_cache.rb:77:in ''

太好了！Rails 服务器现在成功启动了！

问题已解决

错误的原因是 gem 的原生扩展被链接到了错误的 Ruby 动态库（Homebrew 的而不是 rbenv 的）。

解决方案：
使用 bundle exec rails s 而不是 rails s 来启动服务器。

Rails 服务器现在正在运行：
– 地址：http://127.0.0.1:3000
– Ruby 版本：3.4.7 (rbenv)
– Puma 版本：7.1.0
– Rails 版本：8.0.3

你可以在浏览器中访问 http://localhost:3000 来查看你的应用。使用 Ctrl-C 停止服务器。

建议： 今后总是使用 bundle exec rails 命令来确保使用正确的 gem 环境，或者你可以考虑使用 bin/rails s 作为替代。