如何使用Sliver来布局

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

文章目录


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

在这里插入图片描述

1. 概念介绍

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

2. 使用方法

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

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

3. 示例代码

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

200万优质内容无限畅学
flutter 必须掌握的CustomScrollView及Sliver类型控件的几种使用
智玲君
04-21 2078
前言 CustomScrollView是Flutter系统提供的一个用于将多个组件进行组合从而实现统一的滑动效果的控件，并且在使用时要求CustomScrollView中的组件必须是Sliver家族中的成员，Sliver家族成员列举部分如下： 1，SliverAppbar 2，SliverList 3，SliverGrid 4，SliverToBoxAdapter 5，SliverFillRemaining 借助CustomScrollView可轻松实现折叠，置顶等交互，在平时的开发中也算是比较实用的控件，
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 包： 创建 ：
extended_sliver：打造灵活的Sliver组件布局
资源摘要信息:"extended_sliver库是一个强大的Sliver扩展，它提供了多种Sliver组件的扩展功能，使得开发者在使用Flutter框架构建滚动列表时能够更加灵活和高效。库中包含了以下几个关键组件：...
使用Flutter中的Sliver实现复杂的滚动布局
# 1. 引言 ## 1.1 Flutter简介 Flutter是由谷歌开发的一款跨平台移动UI框架，能够快速构建高质量的原生...本文旨在介绍Flutter中的Sliver布局，并通过详细的讲解和示例代码，帮助读者了解Sliver的基本概念、使用方
sliver4.2.2
07-27
在Flutter中，滚动效果可以通过将子Widget包裹在一个滚动容器中来实现，而Sliver正是用来创建这样的滚动容器的。 Sliver4.2.2是Sliver的一个特定版本或常用的配置。具体来说，这个版本可能会包含了一些特定的修复或...
【亲测免费】 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 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

talk_8

真诚赞赏，手有余香

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

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

打赏作者

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

抵扣说明：

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

余额充值