美文网首页Android开发Android开发经验谈Android开发
flutter【13】从框架层面看看flutter的widget

flutter【13】从框架层面看看flutter的widget

作者: 昵称真难选 | 来源:发表于2019-08-09 17:17 被阅读15次

经过前面的一篇文章,flutter 工程创建和组织方面的工作就基本结束了,下一步就可以进行具体的开发。

flutter 作为一个跨平台的 ui 工具包,核心理念就是 widget,所以网上的文章也大多是从 widget 入手进行 flutter 讲解,但是 flutter 中的 widget 太多了,提供了各种各样的 widget,在方便开发者的同时也让人难以从宏观方面把握 flutter 的 widget 的组织结构。

现在网上的文章虽多,大部分侧重于介绍单个 widget 的使用,或者 widget 层级继承原理等方面,这些固然重要,但是在探讨具体 widget 的具体细节之前,如果能从宏观、框架层面了解 flutter 的 组织结构,widget 是怎么划分的,以什么逻辑组织的,在后续的开发工作中,可以更有针对性的选择合适的 widget ,心中也会有一个 widget 的脉络图。

下面还是从初始工程的 main.dart 文件入手,一步一步梳理 flutter 的 widget 组织逻辑。

这里再放一次 main.dart 代码吧,方便叙述。

import 'package:flutter/material.dart';

//这是 app 的入口
void main() => runApp(MyApp());

/**
 * flutter 中绝大多数东西都是 widget,主要有两种,无状态的(StatelessWidget)、有状态的(StatefulWidget)
 */
class MyApp extends StatelessWidget {
  // StatelessWidget 主要的就是这个 build 方法,主要用来执行 widget 的构建
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//MateriaApp 是flutter提供的android平台风格的库
      title: 'Flutter Demo',
      theme: ThemeData(//可以配置主题
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 有状态的 widget
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  //主要的方法就是 createState() ,用来创建一个 State
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//这就是和上面 StatefulWidget 绑定的 State
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    //有状态的widget,可以使用 setState 方法来更新状态,然后 widget 树会根据最新的状态重新构建
    setState(() {
      _counter++;
    });
  }

  //这是 State 的核心方法,用来执行 widget 的构建
  @override
  Widget build(BuildContext context) {
    return Scaffold(//Scaffold 是android 风格app的一个骨架 widget,里面可以配置 appbar等
      appBar: AppBar(
        // 这里的widget就是上面的MyHomePage对象
        title: Text(widget.title),
      ),
      body: Center(//一个单子元素在中间的布局widget
        child: Column(//竖直布局widget
          mainAxisAlignment: MainAxisAlignment.center,//主方向的对齐方式
          children: <Widget>[//子元素列表
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

上述代码中使用的 widget 有 MaterialApp、StatelessWidget、StatefulWidget、Scaffold……,开头的 import 'package:flutter/material.dart'; 这句代码,会将flutter 的大部分 widget 导入进来进行使用。

AS中 ctrl+鼠标左键 点击 material.dart 就可以定位到 material.dart 文件了,文件的内容这里贴出来,如下:

library material;

export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/app_bar_theme.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_app_bar_theme.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/bottom_sheet_theme.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/card_theme.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/color_scheme.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';
export 'src/material/data_table.dart';
export 'src/material/data_table_source.dart';
export 'src/material/date_picker.dart';
export 'src/material/debug.dart';
export 'src/material/dialog.dart';
export 'src/material/dialog_theme.dart';
export 'src/material/divider.dart';
export 'src/material/drawer.dart';
export 'src/material/drawer_header.dart';
export 'src/material/dropdown.dart';
export 'src/material/expand_icon.dart';
export 'src/material/expansion_panel.dart';
export 'src/material/expansion_tile.dart';
export 'src/material/feedback.dart';
export 'src/material/flat_button.dart';
export 'src/material/flexible_space_bar.dart';
export 'src/material/floating_action_button.dart';
export 'src/material/floating_action_button_location.dart';
export 'src/material/floating_action_button_theme.dart';
export 'src/material/flutter_logo.dart';
export 'src/material/grid_tile.dart';
export 'src/material/grid_tile_bar.dart';
export 'src/material/icon_button.dart';
export 'src/material/icons.dart';
export 'src/material/ink_decoration.dart';
export 'src/material/ink_highlight.dart';
export 'src/material/ink_ripple.dart';
export 'src/material/ink_splash.dart';
export 'src/material/ink_well.dart';
export 'src/material/input_border.dart';
export 'src/material/input_decorator.dart';
export 'src/material/list_tile.dart';
export 'src/material/material.dart';
export 'src/material/material_button.dart';
export 'src/material/material_localizations.dart';
export 'src/material/material_state.dart';
export 'src/material/mergeable_material.dart';
export 'src/material/outline_button.dart';
export 'src/material/page.dart';
export 'src/material/page_transitions_theme.dart';
export 'src/material/paginated_data_table.dart';
export 'src/material/popup_menu.dart';
export 'src/material/progress_indicator.dart';
export 'src/material/radio.dart';
export 'src/material/radio_list_tile.dart';
export 'src/material/raised_button.dart';
export 'src/material/range_slider.dart';
export 'src/material/refresh_indicator.dart';
export 'src/material/reorderable_list.dart';
export 'src/material/scaffold.dart';
export 'src/material/scrollbar.dart';
export 'src/material/search.dart';
export 'src/material/shadows.dart';
export 'src/material/slider.dart';
export 'src/material/slider_theme.dart';
export 'src/material/snack_bar.dart';
export 'src/material/snack_bar_theme.dart';
export 'src/material/stepper.dart';
export 'src/material/switch.dart';
export 'src/material/switch_list_tile.dart';
export 'src/material/tab_bar_theme.dart';
export 'src/material/tab_controller.dart';
export 'src/material/tab_indicator.dart';
export 'src/material/tabs.dart';
export 'src/material/text_field.dart';
export 'src/material/text_form_field.dart';
export 'src/material/text_selection.dart';
export 'src/material/text_theme.dart';
export 'src/material/theme.dart';
export 'src/material/theme_data.dart';
export 'src/material/time.dart';
export 'src/material/time_picker.dart';
export 'src/material/toggleable.dart';
export 'src/material/tooltip.dart';
export 'src/material/typography.dart';
export 'src/material/user_accounts_drawer_header.dart';
export 'widgets.dart';

可以看到这个文件中仅仅是声明导入了一些包,并没有具体的实现,需要注意的是前面都是 src/material 开头的路径,很显然,material.dart 文件名字相对应,而最后一个是 widgets.dart,这是为什么呢?

其实你用文件资源管理器打开 material.dart 所在的位置就明白了,具体路径在 flutter\packages\flutter\lib , 该文件夹的全部的文件及子文件夹中的文件在文章的最后会附上。

该目录下有 12 个 dart 文件,内容都和 material.dart 的内容类似,都是使用 export 自动导入了一些包。这些包的具体实现都在 src 目录中,src 的字目录名字和 12 个 dart 文件的名字一致。

需要注意的是这 12 个 dart 文件以及 src 目录中具体实现的 widget dart 文件并不是孤立的,而是相互之间引用的,就如同上面 material.dart 文件中最后一行引用了 widget.dart。也就是说整个 flutter 按照功能或者能力分为 12 个大的模块,模块内部具体的实现根据需要的能力会引用其他模块。

  • animation.dart:动画模块
  • cupertino.dart:ios design 风格模块
  • foundation.dart:底层工具模块
  • gesture.dart:手势识别模块
  • material.dart:android material design 风格模块
  • painting.dart:flutter 绘制引擎模块,包含各种绘制 api,比如缩放图片、阴影插值,绘制边框等等
  • physics.dart:简单一维物理模拟模块,比如弹簧、摩擦、重力等,用于用户界面动画
  • rendering.dart:flutter RenderObjuect 渲染树模块,提供给 wieget 模块使用,实现其后端的布局和绘制
  • scheduler.dart:调度模块,负责程序框架回调以及特定优先级任务的调度
  • semantics.dart:语意模块,SemanticsEvent 类定义了平台的语意事件的发送协议,SemanticsNode层级表示了UI的语意结构,用于特定平台的加速服务
  • services.dart:平台能力服务,整个模块只引用了 core dart 库以及 foundation模块
  • widgets.dart:flutter 的 widgets 框架

从上面可以看出来,flutter 的基础 widgets 都在 widgets.dart 文件中导入了,具体的实现在 src/widgets/ 目录中。

  widgets
            actions.dart
            animated_cross_fade.dart
            animated_list.dart
            animated_size.dart
            animated_switcher.dart
            annotated_region.dart
            app.dart
            async.dart
            automatic_keep_alive.dart
            banner.dart
            basic.dart
            binding.dart
            bottom_navigation_bar_item.dart
            container.dart
            debug.dart
            dismissible.dart
            draggable_scrollable_sheet.dart
            drag_target.dart
            editable_text.dart
            fade_in_image.dart
            focus_manager.dart
            focus_scope.dart
            focus_traversal.dart
            form.dart
            framework.dart
            gesture_detector.dart
            grid_paper.dart
            heroes.dart
            icon.dart
            icon_data.dart
            icon_theme.dart
            icon_theme_data.dart
            image.dart
            image_icon.dart
            implicit_animations.dart
            inherited_model.dart
            inherited_notifier.dart
            layout_builder.dart
            list_wheel_scroll_view.dart
            localizations.dart
            media_query.dart
            modal_barrier.dart
            navigation_toolbar.dart
            navigator.dart
            nested_scroll_view.dart
            notification_listener.dart
            orientation_builder.dart
            overlay.dart
            overscroll_indicator.dart
            pages.dart
            page_storage.dart
            page_view.dart
            performance_overlay.dart
            placeholder.dart
            platform_view.dart
            preferred_size.dart
            primary_scroll_controller.dart
            raw_keyboard_listener.dart
            routes.dart
            safe_area.dart
            scrollable.dart
            scrollbar.dart
            scroll_activity.dart
            scroll_configuration.dart
            scroll_context.dart
            scroll_controller.dart
            scroll_metrics.dart
            scroll_notification.dart
            scroll_physics.dart
            scroll_position.dart
            scroll_position_with_single_context.dart
            scroll_simulation.dart
            scroll_view.dart
            semantics_debugger.dart
            shortcuts.dart
            single_child_scroll_view.dart
            size_changed_layout_notifier.dart
            sliver.dart
            sliver_persistent_header.dart
            sliver_prototype_extent_list.dart
            spacer.dart
            status_transitions.dart
            table.dart
            text.dart
            texture.dart
            text_selection.dart
            ticker_provider.dart
            title.dart
            transitions.dart
            unique_widget.dart
            value_listenable_builder.dart
            viewport.dart
            visibility.dart
            widget_inspector.dart
            widget_span.dart
            will_pop_scope.dart

另外对应android平台下的 material 风格的 widget 是在 material.dart 模块中,该模块实在 widgets.dart 的基础上,实现并补充了一些 android md 风格的 widget,具体的实现都在 src/materal/ 目录下,具体的文件如下:

   ├─material
    │  │  about.dart
    │  │  animated_icons.dart
    │  │  app.dart
    │  │  app_bar.dart
    │  │  app_bar_theme.dart
    │  │  arc.dart
    │  │  back_button.dart
    │  │  bottom_app_bar.dart
    │  │  bottom_app_bar_theme.dart
    │  │  bottom_navigation_bar.dart
    │  │  bottom_sheet.dart
    │  │  bottom_sheet_theme.dart
    │  │  button.dart
    │  │  button_bar.dart
    │  │  button_theme.dart
    │  │  card.dart
    │  │  card_theme.dart
    │  │  checkbox.dart
    │  │  checkbox_list_tile.dart
    │  │  chip.dart
    │  │  chip_theme.dart
    │  │  circle_avatar.dart
    │  │  colors.dart
    │  │  color_scheme.dart
    │  │  constants.dart
    │  │  data_table.dart
    │  │  data_table_source.dart
    │  │  date_picker.dart
    │  │  debug.dart
    │  │  dialog.dart
    │  │  dialog_theme.dart
    │  │  divider.dart
    │  │  drawer.dart
    │  │  drawer_header.dart
    │  │  dropdown.dart
    │  │  expand_icon.dart
    │  │  expansion_panel.dart
    │  │  expansion_tile.dart
    │  │  feedback.dart
    │  │  flat_button.dart
    │  │  flexible_space_bar.dart
    │  │  floating_action_button.dart
    │  │  floating_action_button_location.dart
    │  │  floating_action_button_theme.dart
    │  │  flutter_logo.dart
    │  │  grid_tile.dart
    │  │  grid_tile_bar.dart
    │  │  icons.dart
    │  │  icon_button.dart
    │  │  ink_decoration.dart
    │  │  ink_highlight.dart
    │  │  ink_ripple.dart
    │  │  ink_splash.dart
    │  │  ink_well.dart
    │  │  input_border.dart
    │  │  input_decorator.dart
    │  │  list_tile.dart
    │  │  material.dart
    │  │  material_button.dart
    │  │  material_localizations.dart
    │  │  material_state.dart
    │  │  mergeable_material.dart
    │  │  outline_button.dart
    │  │  page.dart
    │  │  page_transitions_theme.dart
    │  │  paginated_data_table.dart
    │  │  popup_menu.dart
    │  │  progress_indicator.dart
    │  │  radio.dart
    │  │  radio_list_tile.dart
    │  │  raised_button.dart
    │  │  range_slider.dart
    │  │  refresh_indicator.dart
    │  │  reorderable_list.dart
    │  │  scaffold.dart
    │  │  scrollbar.dart
    │  │  search.dart
    │  │  shadows.dart
    │  │  slider.dart
    │  │  slider_theme.dart
    │  │  snack_bar.dart
    │  │  snack_bar_theme.dart
    │  │  stepper.dart
    │  │  switch.dart
    │  │  switch_list_tile.dart
    │  │  tabs.dart
    │  │  tab_bar_theme.dart
    │  │  tab_controller.dart
    │  │  tab_indicator.dart
    │  │  text_field.dart
    │  │  text_form_field.dart
    │  │  text_selection.dart
    │  │  text_theme.dart
    │  │  theme.dart
    │  │  theme_data.dart
    │  │  time.dart
    │  │  time_picker.dart
    │  │  toggleable.dart
    │  │  tooltip.dart
    │  │  typography.dart
    │  │  user_accounts_drawer_header.dart
    │  │  
    │  └─animated_icons
    │      │  animated_icons.dart
    │      │  animated_icons_data.dart
    │      │  
    │      └─data
    │              add_event.g.dart
    │              arrow_menu.g.dart
    │              close_menu.g.dart
    │              ellipsis_search.g.dart
    │              event_add.g.dart
    │              home_menu.g.dart
    │              list_view.g.dart
    │              menu_arrow.g.dart
    │              menu_close.g.dart
    │              menu_home.g.dart
    │              pause_play.g.dart
    │              play_pause.g.dart
    │              search_ellipsis.g.dart
    │              view_list.g.dart

另外 ios 平台的 widget 在 cupertino.dart 模块中,对应的目录为 src/cupertino。这里就不再列举了。

src/widgets、src/material 目录中的文件,每一个文件对应这一个/多个/一类 widget。也就是说后面我们开发的过程中,可以在该目录下寻找需要的 widget,同时平时浏览下该目录下文件的内容,看看都有哪些 widget,提前有个印象。

到这里 main.dart 中用到的那些 widget 你就可以 ctrl+鼠标左键 点进去看看了,像 StatelessWidget、StatefulWidget 这种基础 widget 是在 widgets.dart 模块中,而 MaterialApp 这种和android平台相关的 widget 是在 material.dart 模块中。

本文从框架的角度,分析了 flutter 的模块组织,描述了 widget 的划分和组织逻辑,从宏观上有一个印象,为后续讲解具体 widget 用法做铺垫,免得在大量 widget 中迷失自我。

最后附上 flutter\packages\flutter\lib 路径下所有的文件和文件夹以及子文件夹中的内容。

│  analysis_options_user.yaml
│  animation.dart
│  cupertino.dart
│  foundation.dart
│  gestures.dart
│  material.dart
│  painting.dart
│  physics.dart
│  rendering.dart
│  scheduler.dart
│  semantics.dart
│  services.dart
│  widgets.dart
│  
└─src
    ├─animation
    │      animation.dart
    │      animations.dart
    │      animation_controller.dart
    │      curves.dart
    │      listener_helpers.dart
    │      tween.dart
    │      tween_sequence.dart
    │      
    ├─cupertino
    │      action_sheet.dart
    │      activity_indicator.dart
    │      app.dart
    │      bottom_tab_bar.dart
    │      button.dart
    │      colors.dart
    │      date_picker.dart
    │      dialog.dart
    │      icons.dart
    │      localizations.dart
    │      nav_bar.dart
    │      page_scaffold.dart
    │      picker.dart
    │      refresh.dart
    │      route.dart
    │      scrollbar.dart
    │      segmented_control.dart
    │      slider.dart
    │      switch.dart
    │      tab_scaffold.dart
    │      tab_view.dart
    │      text_field.dart
    │      text_selection.dart
    │      text_theme.dart
    │      theme.dart
    │      thumb_painter.dart
    │      
    ├─foundation
    │      annotations.dart
    │      assertions.dart
    │      basic_types.dart
    │      binding.dart
    │      bitfield.dart
    │      change_notifier.dart
    │      collections.dart
    │      consolidate_response.dart
    │      constants.dart
    │      debug.dart
    │      diagnostics.dart
    │      isolates.dart
    │      key.dart
    │      licenses.dart
    │      node.dart
    │      observer_list.dart
    │      platform.dart
    │      print.dart
    │      profile.dart
    │      README.md
    │      serialization.dart
    │      synchronous_future.dart
    │      unicode.dart
    │      _bitfield_io.dart
    │      _bitfield_web.dart
    │      _isolates_io.dart
    │      _isolates_web.dart
    │      _platform_io.dart
    │      _platform_web.dart
    │      
    ├─gestures
    │      arena.dart
    │      binding.dart
    │      constants.dart
    │      converter.dart
    │      debug.dart
    │      drag.dart
    │      drag_details.dart
    │      eager.dart
    │      events.dart
    │      force_press.dart
    │      hit_test.dart
    │      long_press.dart
    │      lsq_solver.dart
    │      monodrag.dart
    │      mouse_tracking.dart
    │      multidrag.dart
    │      multitap.dart
    │      pointer_router.dart
    │      pointer_signal_resolver.dart
    │      recognizer.dart
    │      scale.dart
    │      tap.dart
    │      team.dart
    │      velocity_tracker.dart
    │      
    ├─material
    │  │  about.dart
    │  │  animated_icons.dart
    │  │  app.dart
    │  │  app_bar.dart
    │  │  app_bar_theme.dart
    │  │  arc.dart
    │  │  back_button.dart
    │  │  bottom_app_bar.dart
    │  │  bottom_app_bar_theme.dart
    │  │  bottom_navigation_bar.dart
    │  │  bottom_sheet.dart
    │  │  bottom_sheet_theme.dart
    │  │  button.dart
    │  │  button_bar.dart
    │  │  button_theme.dart
    │  │  card.dart
    │  │  card_theme.dart
    │  │  checkbox.dart
    │  │  checkbox_list_tile.dart
    │  │  chip.dart
    │  │  chip_theme.dart
    │  │  circle_avatar.dart
    │  │  colors.dart
    │  │  color_scheme.dart
    │  │  constants.dart
    │  │  data_table.dart
    │  │  data_table_source.dart
    │  │  date_picker.dart
    │  │  debug.dart
    │  │  dialog.dart
    │  │  dialog_theme.dart
    │  │  divider.dart
    │  │  drawer.dart
    │  │  drawer_header.dart
    │  │  dropdown.dart
    │  │  expand_icon.dart
    │  │  expansion_panel.dart
    │  │  expansion_tile.dart
    │  │  feedback.dart
    │  │  flat_button.dart
    │  │  flexible_space_bar.dart
    │  │  floating_action_button.dart
    │  │  floating_action_button_location.dart
    │  │  floating_action_button_theme.dart
    │  │  flutter_logo.dart
    │  │  grid_tile.dart
    │  │  grid_tile_bar.dart
    │  │  icons.dart
    │  │  icon_button.dart
    │  │  ink_decoration.dart
    │  │  ink_highlight.dart
    │  │  ink_ripple.dart
    │  │  ink_splash.dart
    │  │  ink_well.dart
    │  │  input_border.dart
    │  │  input_decorator.dart
    │  │  list_tile.dart
    │  │  material.dart
    │  │  material_button.dart
    │  │  material_localizations.dart
    │  │  material_state.dart
    │  │  mergeable_material.dart
    │  │  outline_button.dart
    │  │  page.dart
    │  │  page_transitions_theme.dart
    │  │  paginated_data_table.dart
    │  │  popup_menu.dart
    │  │  progress_indicator.dart
    │  │  radio.dart
    │  │  radio_list_tile.dart
    │  │  raised_button.dart
    │  │  range_slider.dart
    │  │  refresh_indicator.dart
    │  │  reorderable_list.dart
    │  │  scaffold.dart
    │  │  scrollbar.dart
    │  │  search.dart
    │  │  shadows.dart
    │  │  slider.dart
    │  │  slider_theme.dart
    │  │  snack_bar.dart
    │  │  snack_bar_theme.dart
    │  │  stepper.dart
    │  │  switch.dart
    │  │  switch_list_tile.dart
    │  │  tabs.dart
    │  │  tab_bar_theme.dart
    │  │  tab_controller.dart
    │  │  tab_indicator.dart
    │  │  text_field.dart
    │  │  text_form_field.dart
    │  │  text_selection.dart
    │  │  text_theme.dart
    │  │  theme.dart
    │  │  theme_data.dart
    │  │  time.dart
    │  │  time_picker.dart
    │  │  toggleable.dart
    │  │  tooltip.dart
    │  │  typography.dart
    │  │  user_accounts_drawer_header.dart
    │  │  
    │  └─animated_icons
    │      │  animated_icons.dart
    │      │  animated_icons_data.dart
    │      │  
    │      └─data
    │              add_event.g.dart
    │              arrow_menu.g.dart
    │              close_menu.g.dart
    │              ellipsis_search.g.dart
    │              event_add.g.dart
    │              home_menu.g.dart
    │              list_view.g.dart
    │              menu_arrow.g.dart
    │              menu_close.g.dart
    │              menu_home.g.dart
    │              pause_play.g.dart
    │              play_pause.g.dart
    │              search_ellipsis.g.dart
    │              view_list.g.dart
    │              
    ├─painting
    │      alignment.dart
    │      basic_types.dart
    │      beveled_rectangle_border.dart
    │      binding.dart
    │      borders.dart
    │      border_radius.dart
    │      box_border.dart
    │      box_decoration.dart
    │      box_fit.dart
    │      box_shadow.dart
    │      circle_border.dart
    │      clip.dart
    │      colors.dart
    │      continuous_rectangle_border.dart
    │      debug.dart
    │      decoration.dart
    │      decoration_image.dart
    │      edge_insets.dart
    │      flutter_logo.dart
    │      fractional_offset.dart
    │      geometry.dart
    │      gradient.dart
    │      image_cache.dart
    │      image_decoder.dart
    │      image_provider.dart
    │      image_resolution.dart
    │      image_stream.dart
    │      inline_span.dart
    │      matrix_utils.dart
    │      notched_shapes.dart
    │      paint_utilities.dart
    │      placeholder_span.dart
    │      rounded_rectangle_border.dart
    │      shader_warm_up.dart
    │      shape_decoration.dart
    │      stadium_border.dart
    │      strut_style.dart
    │      text_painter.dart
    │      text_span.dart
    │      text_style.dart
    │      _network_image_io.dart
    │      _network_image_web.dart
    │      
    ├─physics
    │      clamped_simulation.dart
    │      friction_simulation.dart
    │      gravity_simulation.dart
    │      simulation.dart
    │      spring_simulation.dart
    │      tolerance.dart
    │      utils.dart
    │      
    ├─rendering
    │      animated_size.dart
    │      binding.dart
    │      box.dart
    │      custom_layout.dart
    │      custom_paint.dart
    │      debug.dart
    │      debug_overflow_indicator.dart
    │      editable.dart
    │      error.dart
    │      flex.dart
    │      flow.dart
    │      image.dart
    │      layer.dart
    │      list_body.dart
    │      list_wheel_viewport.dart
    │      object.dart
    │      paragraph.dart
    │      performance_overlay.dart
    │      platform_view.dart
    │      proxy_box.dart
    │      rotated_box.dart
    │      shifted_box.dart
    │      sliver.dart
    │      sliver_fill.dart
    │      sliver_fixed_extent_list.dart
    │      sliver_grid.dart
    │      sliver_list.dart
    │      sliver_multi_box_adaptor.dart
    │      sliver_padding.dart
    │      sliver_persistent_header.dart
    │      stack.dart
    │      table.dart
    │      table_border.dart
    │      texture.dart
    │      tweens.dart
    │      view.dart
    │      viewport.dart
    │      viewport_offset.dart
    │      wrap.dart
    │      
    ├─scheduler
    │      binding.dart
    │      debug.dart
    │      priority.dart
    │      ticker.dart
    │      
    ├─semantics
    │      binding.dart
    │      debug.dart
    │      semantics.dart
    │      semantics_event.dart
    │      semantics_service.dart
    │      
    ├─services
    │      asset_bundle.dart
    │      binary_messenger.dart
    │      binding.dart
    │      clipboard.dart
    │      font_loader.dart
    │      haptic_feedback.dart
    │      keyboard_key.dart
    │      keyboard_maps.dart
    │      message_codec.dart
    │      message_codecs.dart
    │      platform_channel.dart
    │      platform_messages.dart
    │      platform_views.dart
    │      raw_keyboard.dart
    │      raw_keyboard_android.dart
    │      raw_keyboard_fuchsia.dart
    │      raw_keyboard_linux.dart
    │      raw_keyboard_macos.dart
    │      system_channels.dart
    │      system_chrome.dart
    │      system_navigator.dart
    │      system_sound.dart
    │      text_editing.dart
    │      text_formatter.dart
    │      text_input.dart
    │      
    └─widgets
            actions.dart
            animated_cross_fade.dart
            animated_list.dart
            animated_size.dart
            animated_switcher.dart
            annotated_region.dart
            app.dart
            async.dart
            automatic_keep_alive.dart
            banner.dart
            basic.dart
            binding.dart
            bottom_navigation_bar_item.dart
            container.dart
            debug.dart
            dismissible.dart
            draggable_scrollable_sheet.dart
            drag_target.dart
            editable_text.dart
            fade_in_image.dart
            focus_manager.dart
            focus_scope.dart
            focus_traversal.dart
            form.dart
            framework.dart
            gesture_detector.dart
            grid_paper.dart
            heroes.dart
            icon.dart
            icon_data.dart
            icon_theme.dart
            icon_theme_data.dart
            image.dart
            image_icon.dart
            implicit_animations.dart
            inherited_model.dart
            inherited_notifier.dart
            layout_builder.dart
            list_wheel_scroll_view.dart
            localizations.dart
            media_query.dart
            modal_barrier.dart
            navigation_toolbar.dart
            navigator.dart
            nested_scroll_view.dart
            notification_listener.dart
            orientation_builder.dart
            overlay.dart
            overscroll_indicator.dart
            pages.dart
            page_storage.dart
            page_view.dart
            performance_overlay.dart
            placeholder.dart
            platform_view.dart
            preferred_size.dart
            primary_scroll_controller.dart
            raw_keyboard_listener.dart
            routes.dart
            safe_area.dart
            scrollable.dart
            scrollbar.dart
            scroll_activity.dart
            scroll_configuration.dart
            scroll_context.dart
            scroll_controller.dart
            scroll_metrics.dart
            scroll_notification.dart
            scroll_physics.dart
            scroll_position.dart
            scroll_position_with_single_context.dart
            scroll_simulation.dart
            scroll_view.dart
            semantics_debugger.dart
            shortcuts.dart
            single_child_scroll_view.dart
            size_changed_layout_notifier.dart
            sliver.dart
            sliver_persistent_header.dart
            sliver_prototype_extent_list.dart
            spacer.dart
            status_transitions.dart
            table.dart
            text.dart
            texture.dart
            text_selection.dart
            ticker_provider.dart
            title.dart
            transitions.dart
            unique_widget.dart
            value_listenable_builder.dart
            viewport.dart
            visibility.dart
            widget_inspector.dart
            widget_span.dart
            will_pop_scope.dart

相关文章

  • flutter【13】从框架层面看看flutter的widget

    经过前面的一篇文章,flutter 工程创建和组织方面的工作就基本结束了,下一步就可以进行具体的开发。 flutt...

  • flutter widget 框架概述

    今天开始,我们开始系统的学习下flutter widget 框架 介绍 Flutter Widget采用现代响应式...

  • Flutter界面开发(二)

    Flutter 视图核心对象简介 Flutter Widget采用现代响应式框架构建,这是从 React 中获得的...

  • 01——Flutter Widget框架概述

    一. 介绍 Flutter Widget采用现代响应式框架构建,这是从 React[http://facebook...

  • Flutter widget框架

    Flutter Widget 采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用 Widget...

  • Widgets 介绍

    Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建...

  • Flutter之Widget和Element

    一、Widget Flutter是移动UI框架,Widget组件是UI的基础。 它们都是抽象类,继承Widget,...

  • VSCode Flutter 配置

    插件 Dart Flutter Flutter Generators Flutter Widget Snippet...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • 灵感

    Flutter从React吸取灵感,现代化框架创建出精美组件。核心思想用Widget来构建UI界面。Widget描...

网友评论

    本文标题:flutter【13】从框架层面看看flutter的widget

    本文链接:https://www.haomeiwen.com/subject/wmnhjctx.html