【占位 widget】 Flutter Placeholder

简介: Placeholder widget 绘制一个框,表示将来将添加其他小部件的位置。Placeholder 在开发过程中非常有用,可以指示界面尚未完成。

Placeholder 介绍

默认情况下,占位符的大小适合其容器。如果占位符位于 unbounded space,它将根据给定的 fallbackWidth 和 fallbackHeight 调整自身大小。

Placeholder 可以用最快的速度搭建起页面的骨架,把流程跑起来,然后一步一步完善其中的内容。Placeholder 可以指定 color, strokeWidth,fallbackHeight 和 fallbackWidth。

使用 Placeholer

 SizedBox(width:100,height:100,child: Placeholder(
      color: Colors.green,
      strokeWidth: 10,
    ));

nmnxrdbc33hyk_7e9bee3796294bb7a9f74c288af99bd9.png

就是这个样子了,color 是线条的颜色。

如果用在 Row ,Column 里面,默认在宽度,高度是 unbounded,可以用 fallbackHeight 和 fallbackWidth 限定大小。

SizedBox(
        height: 100,
        child: Row(
          children: [
            Placeholder(
              fallbackWidth: 100,
              color: Colors.green,
              strokeWidth: 10,
            )
          ],
     ));
SizedBox(
        width: 100,
        child:Column(
          children: [
            Placeholder(
              fallbackHeight: 100,
              color: Colors.green,
              strokeWidth: 10,
            )
          ],
     ));

今天就到这里了,谢谢观看。

目录
相关文章
|
19天前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
20天前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
20天前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
20天前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
20天前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
20天前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
9月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
10月前
Flutter源码分析笔记:Widget类源码分析
本文记录阅读与分析Flutter源码 - Widget类源码分析。
65 0
Flutter源码分析笔记:Widget类源码分析
|
11月前
|
API Android开发 容器
Flutter控件之基类Widget封装
基类的Widget主要确定以下几个方面,第一就是,自定义一个抽象类还是非抽象类,第二、继承方式,采取有状态还是无状态,第三、关于组件的点击方式,如何进行实现。
118 0
Flutter万物皆为Widget
Flutter 中的 Widget 是描述界面元素的基本单元,可以包含视觉和交互元素。Widget 可以嵌套、组合和扩展,从而构建出复杂的 UI 界面。在 Flutter 中,Widget 可以分为两种类型:StatelessWidget 和 StatefulWidget。
Flutter万物皆为Widget