📜  Flutter的小部件是什么?

📅  最后修改于: 2021-09-02 05:12:16             🧑  作者: Mango

Flutter是 Google 的 UI 工具包,用于从单个代码库制作漂亮的、本地编译的 iOS 和 Android 应用程序。要构建任何应用程序,我们从小部件开始flutter应用程序的构建块。小部件描述了鉴于其当前配置和状态,它们的视图应该是什么样子。它包括文本小部件、行小部件、列小部件、容器小部件等等。

小部件: Flutter应用程序屏幕上的每个元素都是一个小部件。屏幕视图完全取决于用于构建应用程序的小部件的选择和顺序。应用程序的代码结构是一棵小部件树。

Widgets的类别: flutter Widgets主要分为14个类别。它们主要根据它们在flutter应用程序中提供的功能进行隔离。

  1. 可访问性:这些是使flutter应用程序更易于访问的小部件集。
  2. 动画和运动:这些小部件向其他小部件添加动画。
  3. 资产、图像和图标:这些小部件负责显示图像和显示图标等资产。
  4. 异步:这些在flutter应用程序中提供异步功能。
  5. 基础知识:这些是开发任何flutter应用程序绝对必要的小部件包。
  6. Cupertino:这些是 ios 设计的小部件。
  7. 输入:这组小部件在flutter应用程序中提供输入功能。
  8. 交互模型:这些小部件用于管理触摸事件并将用户路由到应用程序中的不同视图。
  9.  布局:这组小部件有助于根据需要将其他小部件放置在屏幕上。
  10. Material Components:这是一组主要遵循谷歌材料设计的小部件。
  11. 绘画和效果:这是一组小部件,可将视觉更改应用于其子小部件而不改变其布局或形状。
  12. 滚动:这为默认情况下不可滚动的一组其他小部件提供了可滚动性。
  13. 样式:这涉及应用程序的主题、响应能力和大小。
  14. 文本:此显示文本。

小部件的类型: flutter中大致有两种类型的小部件:

  1. 无状态小部件
  2. 有状态小部件

示例:基本应用程序屏幕的布局树:

Dart
import 'package:flutter/material.dart';
 
void main() => runApp(GeeksforGeeks()); 
 
class GeeksforGeeks extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreen,
                                       appBar: AppBar( backgroundColor: Colors.green,
                                       title: Text("GeeksforGeeks"), ),
                                        
   body: Container( child: Center( child: Text("Hello Geeks!!"), ), ), ), ); } }


所用小工具的描述:

  • Scaffold – 实现基本的 Material Design 视觉布局结构。
  • AppBar – 在屏幕顶部创建一个栏。
  • 文本 在屏幕上写下任何内容。
  • 容器 – 包含任何小部件。
  • 居中 – 为其他小部件提供居中对齐。

输出:

Flutter 示例中的小部件