Flutter_Widget——Basic

94 阅读3分钟

Basic 小部件学习

  • 这个是学习Flutter 中最基本的小部件

1. AppBar

  • 在屏幕顶部显示内容和操作的容器。
  • 这个组件一般用于在屏幕上方配置一些内容
    • 常见的一些操作比如进入详情页面后,最上方一行有返回箭头和标题,这个就可以使用这个 Widget 来实现

2. Column

  • 在垂直方向布局子部件列表。
  • 虽然浏览器的默认布局就是从上到下渲染,很多 Widget 只能放置一个子元素,Column Widget 就是可以添加多个子元素让其从上到下渲染
    • 比如 Center 小部件它的子组件就是在 child 这个参数,这个是一个子元素
    • Column 则是 children 这个参数,children是一个 <Widget>[] 集合所以可以在里面放置多个子元素

3. Container

  • 一个方便的小部件,结合了常见的绘画、定位和大小调整小部件。
  • 这个是设置一个容器,可以理解为HTML中的div

4. ElevatedButton

  • 材质设计提升按钮。填充按钮,按下时其材料会升高。
  • 首先需要知道它就是一个按钮button。然后它是一个带有下阴影的圆角按钮,然后点击的时候阴影会缓慢消失造成视觉感觉上是本身是悬浮起来的按钮被按下去了。

5. FlutterLogo

  • Flutter 徽标,采用小部件形式。该小部件遵循 IconTheme。
  • 制作 Logo 的一个小部件,可以动态可以静态等等

6. Icon

  • 材料设计图标。
  • 设置一些Icon图标

7. Image

  • 显示图像的小部件。
  • 用于展示图片的小部件,可以理解为HTMLimg

8. Placeholder

  • 一种绘制一个框的小部件,该框表示有一天将添加其他小部件的位置。
  • 这个是一个占位符,用于在内容没有渲染出来之前展示的东西,我们可以理解为骨架屏.这样就是在实际内容渲染之前展示给用户一些东西不至于一直白屏

9. Row

  • 在水平方向布局子部件列表。
  • Row和前面讲的 Column 很像,不过 Row 是把内部所有子元素按照 水平方向排列(即:默认 从左到右)
    • 你甚至可以把它理解为 设置了 display: flex; 属性。如果这个可以让你更好的记忆这个小部件的话。

10. Scaffold

  • 实现Material Design基本的视觉布局结构。此类提供了用于展示抽屉和底部 sheet 的API。要显示一个持久存在的底部 sheet,对于当前BuildContext,通过Scaffold.of获取ScaffoldState,并使用ScaffoldState.showBottomSheet函数。
  • 它就是实现 Material Design 风格应用的基础结构组件。就是相当于这是个小部件把页面的空间已经给你分配好了,你只需要在指定的内容下面填写需要显示的内容
    • 比如:Scaffold 中有一个参数 appBar 那么你就可以把 想要显示的内容传给它,然后对应的内容就会显示在页面上方的导航栏位置了。

11. Text

  • 具有单一样式的一系列文本。
  • 用来渲染一段文本