【占位 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,
            )
          ],
     ));

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

目录
相关文章
|
1月前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
1月前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
2月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
99 8
|
2月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
118 2
|
3月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
2月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
91 0
|
6月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
218 0
|
7月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
60 0
|
8月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
8月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。