阅读 1467

4.这是一份Flutter常用Widget指南

目录传送门:《Flutter快速上手指南》先导篇

在 Flutter 中,所有的东西都是 Widget —— 万物皆 Widget

Image(图片)、Text(文字)、Container(容器)、Padding(间距)、Align(对齐方式)、GestureDetector(手势).. 所有你知的一切,基本都是 Widget。

Flutter 通过一个个的 Widget 来拼装视图树,处理交互、事件、数据等。

它很灵活,但有些太灵活了。

开发者必须花费很多的精力去掌握这些 Widget。

看个简单的例子。

这个组件就是由多个 Widget 拼装而成。

从上图的视图树中可以看到,这样一个简单的导航栏场景,也需要很多的 Widget 来组装。

你得明确一点,在 Flutter 的开发过程中,你的大部分时间都是在和各种各样的 Widget 打交道。

它们种类很多,目前已经有 30+ 的 Widget 了,并且数量可能仍然在增加。

要完全掌握所有的 Widget 是很困难的,但你应该掌握大部分常用的 Widget,对其它的 Widget 也该有点认知。

本篇会罗列一些常用的 Widget 使用指南。

你可以收藏起来,以便随时可以到这来查询你不太确定的 Widget。

基础 Widgets

🚫 Widget-Container

🚫 Widget-Button

🚫 Widget-Row和Column

🚫 Widget-Text

🚫 Widget-Scaffold

🚫 Widget-Icon

🚫 Widget-Image

🚫 Widget-Stack

🚫 Widget-TabBar+TabBarView

🚫 Widget-输入框TextField

用于布局的 Widgets

🚫 Widget-Align

🚫 Widget-Center

🚫 Widget-Expended

🚫 Widget-LayoutBuilder

🚫 Widget-Padding

🚫 Widget-Wrap

可滚动 Widgets

🚫 Widget-CustomScrollView

🚫 Widget-GridView

🚫 Widget-ListView

🚫 Widget-PageView

🚫 Widget-SingleChildScrollView

装饰 Widgets

🚫 Widget-BoxDecoration

🚫 Widget-Clip系列

🚫 Widget-Opacity

🚫 Widget-SafeArea

🚫 Widget-高斯模糊BackdropFilter

功能性 Widgets

🚫 Widget-FutureBuilder和StreamBuilder

🚫 Widget-拦截返回键WillPopScope

⚠️ 本篇文章在动态更新中.. 不要尝试点击前面有 🚫 的链接!


目录传送门:《Flutter快速上手指南》先导篇

如何找到我?

传送门:CoorChice 的主页

传送门:CoorChice 的 Github