SliverPadding组件的用法

最新推荐文章于 2024-10-14 22:59:28 发布
最新推荐文章于 2024-10-14 22:59:28 发布
阅读量651 收藏 9
点赞数 21
CC 4.0 BY-SA版权
分类专栏： 一起Talk Flutter吧 文章标签： 移动开发Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/talk_8/article/details/142861369

文章目录


我们在上一章回中介绍了SliverAppBar组件相关的内容，本章回中将介绍SliverPadding组件.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

我们在本章回中介绍的SliverPadding组件类似Pading组件，它主要用来给其它组件添加边距。只不过SliverPadding是专门给SliverList和SliverGrid组件添加边距的，而Padding组件可以给Sliiver相关组件外的所有组件添加边距，因此SliverPadding是专用的，而Padding是通用的，使用范围相对广一些。本章回中将详细介绍SliverPadding组件的使用方法。

使用方法

和其它组件一样SliverPadding组件提供了相关的属性来控制自己，我们只需要掌握常用的属性就可以，下面是该组件中常用的属性：

  • sliver属性：主要用来存放其它组件，不过必须是SliverList或者SliverGrid类型的组件；
  • padding属性：主要用来控制组件在周围四个方向上的边距，这个组件就是sliver属性对应组件；
    掌握这些常用属性后，我们来在后面的小节中通过具体的示例代码来演示它的使用方法。

示例代码

SliverPadding(
 ///在上下左右四个方向上添加边距
 padding
最低0.47元/天 解锁文章

200万优质内容无限畅学
第 2-1 课：列表滚动组件详解（CustomScrollView、ListView、ScrollView、ExpansionPanel）...
持续学习中
09-22 1603
这节课将继续讲解 Flutter 的常用组件中的列表滚动组件。 在实际开发中，会经常涉及到列表滚动。在 Flutter 中可以滚动的组件容器有很多，如 ScrollView、ListView、GridView、CustomScrollView 等等。那么这节课就带领大家对 Flutter 的常用组件中的列表滚动组件进行详细分析讲解，并结合案例进行详细的用法讲解。 本文将主要介绍： Cu...
Flutter 滚动布局：sliver模型
Mamong's blog
01-22 2636
Flutter中可滚动布局基本都来自Sliver模型，本文探讨sliver模型原理。
第一百六十回 SliverPadding组件
talk_8的专栏
10-01 339
本章回中主要介绍了SliverPadding组件的概念和使用方法，并且通过文本结合代码的方式进行了介绍，它需要和前面章回中介绍过的SliverList和SliverGrid组件一起配合使用。
Flutter开发（十一）—— 五种布局之Sliver滚动布局
RedKeyer的博客
04-26 4736
Flutter开发（十一）—— 五种布局之CardWidget 卡片布局
SliverGrid 和 SliverPadding 简单样例
weixin_46642112的博客
04-30 565
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class SliverGridAndSliverPaddingDemo extends StatefulWidget{ @override _SliverGridAndSliverPaddingDemoState createState()=>_SliverGridAndSliverPaddingDemoState(); } cl
Flutter 中的 SliverPadding 小部件：全面指南
smileKH的博客
05-30 771
Flutter 是一个功能丰富的 UI 框架，由 Google 开发，允许开发者使用 Dart 语言来构建高性能、美观的跨平台应用。在 Flutter 的滚动组件体系中， 是一个用来为其子 组件添加填充（padding）的组件。本文将为您提供一个全面的指南，介绍如何在 Flutter 应用中使用 小部件。 是一个 类的组件，它为嵌套的 子组件添加指定的填充。这可以用于在滚动视图中为内容添加边距，类似于 组件对普通小部件的作用。使用 通常涉及以下几个步骤：导入 Flutter 包： 创建 ：
Sliver组件的用法
talk_8的专栏
10-14 421
我们在前面的章回中介绍了各种Sliver相关的组件：SliverList,SliverGrid，SliverAppBar和SliverPadding，本章回将综合使用它们。
Flutter 笔记 | Flutter 可滚动组件
川峰的博客
05-26 4785
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
【亲测免费】 Sliver 项目安装与使用教程
gitblog_00756的博客
09-26 1075
Sliver 项目安装与使用教程 1. 项目目录结构及介绍 Sliver 项目的目录结构如下： sliver/ ├── client/ ├── docs/ ├── implant/ ├── protobuf/ ├── server/ ├── util/ ├── vendor/ ├── .dockerignore ├── .gitignore ├── CONTRIBUTING.md ├── Dock...
Sliverlight 入门教程七
weixin_33708432的博客
01-15 318
这一节主要是做一个登陆的DEMO，其中用到的控件有TextBlock,TextBox,Button,ListBox,Password   功能介绍：     输入用户名，密码，单击登陆把输入的数据添加到ListBox中，     单击"取消"清空文本框数据和ListBox中的数据；   运行效果如下： 输入用户名，密码     单击登陆按钮,把数据添加ListBox...
第一百六十一回 Sliver综合示例
talk_8的专栏
10-02 215
本章回主要介绍了CustomScrollView组件的用法,以有它和SliverList,SliverGrid以及SliverAppBar配合使用的方法。最后通过代码的方式演示了它们的用法。
Flutter---Sliver集合
a875801的博客
06-12 6044
import 'package:flutter/material.dart'; import 'dart:math' as math; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @over...
ScrollView 与 SliverPadding 的关系
大漠知秋的加油站
11-11 421
Scaffold 中有个 ListView，ListView 中有 100 个高 50 的 Container 用作辅助观看，ListView 中第三个元素是一个 GridView，GridView 的滑动效果被禁止。${DateTimenow如上图所示，要探究的问题就以此为基础。
Flutter组件--Slivers的基本使用
eastWind1101的博客
03-21 1183
我们考虑一个这样的布局：一个滑动的视图中包括一个标题视图（HeaderView），一个列表视图（ListView），一个网格视图（GridView）。我们怎么可以让它们做到统一的滑动效果呢？使用前面的滚动是很难做到的。Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，可以统一管理多个滚动视图。在CustomScrollView中，每一个独立的，可滚动的Widget被称之为Sliver。
Flutter基础七：Sliver,设置一些样式
煮酒Shae
09-20 2864
文章目录SliverGrid网格视图 SliverGrid网格视图 class SliverDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( //Scaffold小部件提供了一种界面结构,空白的页面 body: CustomScrollView( //CustomScrollView有个sliver属性
Flutter——最详细(CustomScrollView)使用教程
人生在世
10-18 6687
创建一个 [ScrollView]，该视图使用薄片创建自定义滚动效果。[SliverList]，这是一个显示线性子项列表的银子列表。[SliverFixedExtentList]，这是一种更高效的薄片，它显示沿滚动轴具有相同范围的子级的线性列表。[SliverGrid]，这是一个显示子项 2D 数组的薄片。[SliverPadding]，这是一个在另一个薄片周围添加空白空间的薄片。[SliverAppBar]，这是一个显示标题的条形，该标题可以在滚动视图滚动时展开和浮动。
Flutter 笔记 | Flutter 核心原理（五）Box 布局模型和 Sliver 布局模型
川峰的博客
06-01 1308
Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型
Flutter的菜鸟教程九:GridView
duo_shine的博客
07-28 9607
本文将介绍一个新的内容 GridView,之前我们使用Container实现了一个网格效果,但只是为了学习组合widget,下面我们将通过GridView来实现网格效果 这里只介绍四种方式 实现网格布局，先看各实现代码,最后有完整版代码 1.extent /** * 1.最常用的网格布局之extent */ Widget _buildGrid1() { return new ...
flutter控件之填充padding控件
chunchun1230的博客
09-07 4330
Padding控件即填充控件，能给子控件插入给定的填充。 事例代码： import 'package:flutter/material.dart'; class PaddingDemo extends StatelessWidget{ @override Widget build(BuildContext context) { return new Scaffold( ...
flutter 在NestedScrollView中SliverPersistentHeader的用法
最新发布
03-09
### 如何在 Flutter 中使用 `NestedScrollView` 和 `SliverPersistentHeader` #### 创建带有持久头部的嵌套滚动视图 为了构建一个具有复杂滚动行为的应用界面，可以利用 `NestedScrollView` 来组合多个子级组件。特别是当涉及到需要固定某些部分（比如顶部栏），同时让其余内容能够自由滚动的情况时，`SliverPersistentHeader` 是非常有用的工具。 下面是一个简单的例子来展示如何设置这样的结构： ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Example')), body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( title: const Text('Title'), floating: false, pinned: true, expandedHeight: 160.0, flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://example.com/image.jpg", fit: BoxFit.cover, ), ), ), ), // 添加一个固定的头部区域 SliverPersistentHeader( delegate: _MySliverAppBarDelegate( minHeight: 60.0, maxHeight: 200.0, child: Container( color: Colors.lightBlueAccent, child: Center(child: Text('PERSISTENT HEADER', style: TextStyle(fontSize: 24))), ), ), pinned: true, ) ]; }, body: Builder( builder: (BuildContext context) { return CustomScrollView( slivers: <Widget>[ SliverOverlapInjector( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), ), SliverPadding( padding: EdgeInsets.all(8.0), sliver: new SliverFixedExtentList( itemExtent: 50.0, delegate: new SliverChildBuilderDelegate( (context, index) => ListTile(title: Text('$index')), childCount: 30, ), ), ), ], ); } ), ), ), ); } } // 定义自定义的 SliverPersistentHeader 的代理类 class _MySliverAppBarDelegate extends SliverPersistentHeaderDelegate { final double minHeight; final double maxHeight; final Widget child; _MySliverAppBarDelegate({ required this.minHeight, required this.maxHeight, required this.child, }); @override double get minExtent => minHeight; @override double get maxExtent => math.max(maxHeight, minHeight); @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { return SizedBox.expand(child: child); } @override bool shouldRebuild(_MySliverAppBarDelegate oldDelegate) { return maxHeight != oldDelegate.maxHeight || minHeight != oldDelegate.minHeight || child != oldDelegate.child; } } ``` 此代码片段展示了如何创建一个包含图片背景的大标题栏和一个始终可见的小标题栏的效果[^1]。通过调整 `_MySliverAppBarDelegate` 类中的参数，可以根据实际需求改变这个浮动条目的外观特性。 #### 关于 `pinned`, `floating` 属性的作用说明 - 当设置了 `pinned=true` 后，即使用户向上滚动页面，该头部也会保持在其位置上不消失。 - 如果希望随着用户的上下滑动使头部跟随移动，则应将 `floating=false` 设置为真值，并配合合适的动画效果以增强用户体验[^2]。 #### 处理潜在的问题 有时可能会遇到一些由于布局冲突或者事件处理不当而导致的问题。例如，在含有 `TabBarView` 的场景下，内外层滚动可能不会按预期工作。此时可以通过仔细配置各个组件之间的关系并确保它们遵循正确的层次结构来进行修复[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏，手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值