给前端开发的一份 flutter 常用组件指南

这篇具有很好参考价值的文章主要介绍了给前端开发的一份 flutter 常用组件指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Container

可以理解为div元素,可设置宽高等属性

常用属性如下:

属性 类型 描述
width double
height double
padding EdgeInsetsGeometry 内边距
margin EdgeInsetsGeometry 外边距
color Color 背景色,注意不能跟decoration.color同时使用,会报错
decoration Decoration 盒模型装饰器

示例:文章来源地址https://www.toymoban.com/news/detail-503862.html

Container(
    color: Colors.white,
    padding: EdgeInsets.only(top: 30),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        border: Border(top: BorderSide(color: Colors.black,width: 1))
    )
)

等价于以下的样式:

<style>
  div {
    background-color: #fff;
    padding-top: 30px;
    border-radius: 5px;
    border-bottom: 1px solid #000;
  }
</style>

<div></div>

SizedBox

Container类似,但仅用于设置容器的宽高,如果需要设置背景色等,请使用Container

常用属性如下:

属性 类型 描述
width double

示例:

SizedBox(
    height: 100
)

等价于以下的样式:

<style>
  div {
    height: 100px;
  }
</style>
<div></div>

Text

文本组件,用来显示文本的

常用属性如下:

属性 类型 描述
style TextStyle 文本相关样式,字体大小,加粗,颜色等
maxLines int 文本最大行数
overflow TextOverflow 超出隐藏方式
textAlign TextAlign 文本对齐方式

示例:

Text(
    '文本',
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontSize: 14, color: Colors.black87),
)

等价于以下的样式:

<style>
  div {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 超出几行省略 */
    overflow: hidden;
  }
</style>

<div>文本</div>

Image

图片组件,可用于加载网络,手机,App 内的图片

加载网络图片

Image.network('xxx')

加载 App 内的图片

Image.asset('xxx')

加载手机图片

Image.file(file)

常用属性如下:

属性 类型 描述
width double
height double
fit BoxFit 适配模式
alignment AlignmentGeometry 对齐方式

示例:

Image.network(
    'xxx',
    fit: BoxFit.contain,
    height: 88,
    width: 121,
    alignment: AlignmentDirectional.bottomEnd,
)

Scaffold

快速搭建页面框架的组件

常用属性如下:

属性 类型 描述
appBar PreferredSizeWidget 顶部导航栏
body Widget 内容区域
bottomNavigationBar Widget 底部导航栏

示例:

Scaffold(
    appBar: AppBar(
        title: const Text('拍照功能'),
    ),
    body: PageView(),
      // 底部导航
    bottomNavigationBar: BottomNavigationBar(),
)

等价于以下的样式:

<style>
  .Scaffold {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .body {
    flex: 1;
  }
</style>
<div class="Scaffold">
  <div class="appBar">appBar</div>
  <div class="body">body</div>
  <div class="bottomNavigationBar">bottomNavigationBar</div>
</div>

LimitedBox

限制容器的最大宽高

常用属性如下:

属性 类型 描述
maxWidth double 最大宽度
maxHeight double 最大高度

示例:

LimitedBox(
    maxWidth: 130,
)

等价于以下的样式:

<style>
  div {
    max-width: 130px;
  }
</style>
<div></div>

Row

横向布局,css 中的 flex 布局

常用属性如下:

属性 类型 描述
mainAxisAlignment MainAxisAlignment 主轴对齐方式(水平方向)
crossAxisAlignment CrossAxisAlignment 副轴对齐方式(垂直方向)

示例:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center
)

等价于以下的样式:

<style>
  div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
</style>
<div></div>

Column

纵向布局,css 中的 flex 布局

常用属性如下:

属性 类型 描述
mainAxisAlignment MainAxisAlignment 主轴对齐方式(垂直方向)
crossAxisAlignment CrossAxisAlignment 副轴对齐方式(水平方向)

示例:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center
)

等价于以下的样式:

<style>
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
</style>
<div></div>

Expanded

Expanded必须要要结合Column或者Row一起使用,否则会报错。作用是动态调整 child 组件沿主轴的尺寸,比如填充剩余空间,比如设置尺寸比例。

常用属性如下:

属性 类型 描述
flex int 占据剩余空间的比例

示例:

Row(
  children: [
    Expanded(child:Text('test'),flex:1),
    child:Text('test'),
  ],
)

等价于以下的样式:

<style>
  .row {
    display: flex;
    flex-direction: row;
  }
  .expanded {
    flex: 1;
  }
</style>
<div class="row">
  <div class="expanded"></div>
  <div></div>
</div>

Flexible

Flexible必须要要结合Column或者Row一起使用,Expanded组件就是继承于Flexible组件

常用属性如下:

属性 类型 描述
flex int 填充比例
fit FlexFit 可用空间填充方式

FlexFit.tight 被迫会将子类填充可用空间(1/6),所以设置后即使我们设置了子项宽度也没有作用

  • FlexFit.loose 允许子项 <= 可用空间
  • FlexFit.tight 子项 == 可用空间

示例:

Row(
  children: [
    Flexible(
      flex: 1
    ),
    Flexible(
      flex: 2
    ),
    Flexible(
      flex: 3
    ),
  ],
)

等价于以下的样式:

<style>
  .row {
    display: flex;
    flex-direction: row;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-2 {
    flex: 2;
  }
  .flex-3 {
    flex: 3;
  }
</style>
<div class="row">
  <div class="flex-1"></div>
  <div class="flex-2"></div>
  <div class="flex-3"></div>
</div>

Card

Material风格的卡片控件,Card有较小的圆角和阴影。通常用于展示一组信息

常用属性如下:

属性 类型 描述
color Color 背景颜色
elevation double 阴影值
shadowColor Color 阴影颜色
shape ShapeBorder 形状

示例:

Card(
  shadowColor: Colors.yellowAccent,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
  //color: Colors.orange,
  elevation: 30
)

Stack

叠加布局组件,类似 css 中的绝对定位布局

示例:


Stack(
  children: [
    Text("aa"),
    Text("bb")
  ],
)

等价于以下的样式:

<style>
  .stack {
    position: relative;
  }
  .aa {
    position: absolute;
    top: 0;
    left: 0;
  }
  .bb {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<div class="stack">
  <div class="aa">aa</div>
  <div class="bb">bb</div>
</div>

Positioned

绝对定位,一般跟Stack组件配合一起使用

Positioned.fill方法将填充 Stack 的整个空间

常用属性如下:

属性 类型 描述
left double 距离左边距离
top double 距离上边距离
right double 距离右边距离
bottom double 距离下边距离
width double
height double

示例:

Stack(
  children: [
    Positioned(
      left: 10,
      top: 10,
    )
  ],
)

等价于以下的样式:

<style>
  .stack {
    position: relative;
  }
  .flex-1 {
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>
<div class="stack">
  <div class="positioned"></div>
</div>

Padding

设置内边距

Icon

图标

常用属性如下:

属性 类型 描述
size double 图标大小
color Color 图标颜色

示例:

Icon(Icons.add,size: 10,color: Colors.black)

PhysicalModel

裁剪组件

场景:UI 需要实现四个角的圆角,常规是需要最外层容器设置borderRadius,然后里层的组件也需要设置borderRadius。通过PhysicalModel,只需要设置外层容器的borderRadius,里层组件会被自动裁剪。有点类似overflow:hiden

常用属性如下:

属性 类型 描述
shape BoxShape 设置裁剪形状
clipBehavior Clip 设置裁剪行为
borderRadius BorderRadius 设置圆角半径
color Color 设置背景颜色

示例:

PhysicalModel(
  color: Colors.transparent,
  borderRadius: const BorderRadius.all(Radius.circular(6)),
  // 裁剪
  clipBehavior: Clip.antiAlias,
)

等价于以下的样式:

<style>
  .PhysicalModel {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: red;
    /* 关键 */
    overflow: hidden;
  }

  .child {
    height: 100%;
    width: 100%;
    background-color: blue;
  }
</style>
<div class="PhysicalModel">
  <div class="child"></div>
</div>

ListView

滚动列表组件。涉及大量数据滚动使用ListView.builder可优化性能

示例:

ListView(
  children: [
    Text('text1'),
    Text('text2')
  ],
)

ListView.builder(
  itemCount: 3,
  itemBuilder: (BuildContext context, int index) {
    return Text('list');
  }
)

PageView

实现类似轮播图的效果

数据量大可通过PageView.builder优化性能

常用属性如下:

属性 类型 描述
scrollDirection Axis 滑动方向
physics ScrollPhysics 滑动效果,NeverScrollableScrollPhysics禁用滑动
controller PageController 滚动控制器,可以定位页面,获取当前页面等信息

示例:

final PageController _controller = PageController(
      // 默认显示第几个页面
      initialPage: 0);
PageView(
  // 禁止左右滑动
  physics: NeverScrollableScrollPhysics(),
  controller: _controller,
  children: const [
    HomePage(),
    SearchPage(),
    TravelPage(),
    MyPage(),
  ],
);

PageView.builder(
  scrollDirection: Axis.vertical,
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text('text')
  },
);

FractionallySizedBox

百分比布局

常用属性如下:

属性 类型 描述
widthFactor double 设置宽度比例
heightFactor double 设置高度比例

示例:

FractionallySizedBox(
  // 垂直占满
  heightFactor: 1,
)

等价于以下的样式:

<style>
  div {
    height: 100%;
  }
</style>
<div></div>

TabBar

一般配合TabBarView一起使用

常用属性如下:

属性 类型 描述
controller TabController 控制器
isScrollable bool 多个标签时滚
indicatorColor Color 标签指示器的颜色
labelColor Color 标签的颜色
unselectedLabelColor Color 未选中标签的颜色
indicatorSize TabBarIndicatorSize 指示器的大小
indicatorWeight double 指示器的权重,即线条高度
tabs List<Widget> 每个 tab 组件

示例见下文TabBarView组件配合一起使用

TabBarView

一般配合TabBar一起使用

常用属性如下:

属性 类型 描述
controller TabController 控制器

示例:

tip:类需要混入TickerProviderStateMixin

// with TickerProviderStateMixin
TravelTabModel? travelTabModel = TabController(length: tabs.length, vsync: this)

Column(
  children: [
    TabBar(
        controller: _controller,
        // 多个标签时滚动加载
        isScrollable: true,
        // 标签指示器的颜色
        indicatorColor: Colors.blue,
        // 标签的颜色
        labelColor: Colors.black,
        // 未选中标签的颜色
        unselectedLabelColor: Colors.black,
        // 指示器的大小
        indicatorSize: TabBarIndicatorSize.label,
        // 指示器的权重,即线条高度
        indicatorWeight: 4.0,
        tabs: tabs.map((e) => Tab(text: e.labelName ?? '')).toList()
    ),
    // Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力,但是不强制子组件填充可用空间。
    // Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间,是强制子组件填充可用空间。
    // TabBarView需要明确一个高度
    Flexible(
        child: TabBarView(
            controller: _controller,
            children: tabs.map((e) => Text(e.labelName ?? '')).toList()))
  ],
)

Divider

分割线

常用属性如下:

属性 类型 描述
height double 高度
thickness double 线宽
indent double 分割线左侧间距
endIndent double 分割线右侧间距
color Color 分割线颜色

RefreshIndicator

实现下拉刷新

tip:实现上拉加载需要通过ScrollController监听滚动事件实现

常用属性如下:

属性 类型 描述
onRefresh Future<void> Function() 下拉回调方法
displacement double 触发下拉刷新的距离
color Color 进度指示器前景色 默认为系统主题色
backgroundColor Color 背景色

示例:

实现上拉加载和下拉刷新

ScrollController _scrollController = ScrollController();

void initState() {
  _scrollController.addListener(() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      // 上拉加载
    }
  });
}

RefreshIndicator(
  onRefresh: _handleRefresh,
)

GestureDetector

手势识别的组件,可以识别点击、双击、长按事件、拖动、缩放等手势

常用属性如下:

onTapDown 按下时回调

onTapUp 抬起时回调

onTap 点击事件回调

示例:

GestureDetector(
  onTap: () {},
)

RichText

富文本显示。结合TextSpan组件一起使用

常用属性如下:

属性 类型 描述
overflow TextOverflow 对不可见文本操作
maxLines int 用来设置最大行数
text TextSpan 必传参数,用来展示文本

示例:

RichText(
    text: TextSpan(children:
    [
  TextSpan(
      text: (searchItem.price ?? '') + ' ',
      style: TextStyle(fontSize: 16, color: Colors.orange)),
  TextSpan(
      text: ' ' + (searchItem.star ?? ''),
      style: TextStyle(fontSize: 12, color: Colors.grey))
  ])
  )

TextField

文本输入框

常用属性如下:

属性 类型 描述
controller TextEditingController 控制器
focusNode FocusNode 焦点
obscureText bool 是否隐藏文本,即显示密码类型
maxLines int 最多行数,高度与行数同步
autofocus int 自动聚焦
decoration InputDecoration 装饰
keyboardType TextInputType 键盘类型,即输入类型
onChanged void Function(String) 输入改变回
InputDecoration({
  this.icon,    //位于装饰器外部和输入框前面的图片
  this.labelText,  //用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方,
  this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
  this.helperText, //辅助文本,位于输入框下方,如果errorText不为空的话,则helperText不会显示
  this.helperStyle, //helperText的样式
  this.hintText,  //提示文本,位于输入框内部
  this.hintStyle, //hintText的样式
  this.hintMaxLines, //提示信息最大行数
  this.errorText,  //错误信息提示
  this.errorStyle, //errorText的样式
  this.errorMaxLines,   //errorText最大行数
  this.hasFloatingPlaceholder = true,  //labelText是否浮动,默认为true,修改为false则labelText在输入框获取焦点时不会浮动且不显示
  this.isDense,   //改变输入框是否为密集型,默认为false,修改为true时,图标及间距会变小
  this.contentPadding, //内间距
  this.prefixIcon,  //位于输入框内部起始位置的图标。
  this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
  this.prefixText,  //预填充的文本,例如手机号前面预先加上区号等
  this.prefixStyle,  //prefixText的样式
  this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛,控制输入内容是否明文
  this.suffix,  //位于输入框尾部的控件,同样的不能和suffixText同时使用
  this.suffixText,//位于尾部的填充文字
  this.suffixStyle,  //suffixText的样式
  this.counter,//位于输入框右下方的小控件,不能和counterText同时使用
  this.counterText,//位于右下方显示的文本,常用于显示输入的字符数量
  this.counterStyle, //counterText的样式
  this.filled,  //如果为true,则输入使用fillColor指定的颜色填充
  this.fillColor,  //相当于输入框的背景颜色
  this.errorBorder,   //errorText不为空,输入框没有焦点时要显示的边框
  this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话,该属性无效
  this.focusedErrorBorder,  //errorText不为空时,输入框有焦点时的边框
  this.disabledBorder,  //输入框禁用时显示的边框,如果errorText不为空的话,该属性无效
  this.enabledBorder,  //输入框可用时显示的边框,如果errorText不为空的话,该属性无效
  this.border, //正常情况下的border
  this.enabled = true,  //输入框是否可用
  this.semanticCounterText,
  this.alignLabelWithHint,
})

示例:

TextField(
  autofocus: false,
  style: const TextStyle(
      fontSize: 18,
      color: Colors.black,
      fontWeight: FontWeight.w300),
  // 输入文本的样式
  decoration: InputDecoration(
      contentPadding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
      // 去掉输入框底部线,修复设置了contentPadding后输入框内容不能垂直居中
      focusedBorder: const OutlineInputBorder(
          borderSide:
              BorderSide(width: 0, color: Colors.transparent)),
      disabledBorder: const OutlineInputBorder(
          borderSide:
              BorderSide(width: 0, color: Colors.transparent)),
      enabledBorder: const OutlineInputBorder(
          borderSide:
              BorderSide(width: 0, color: Colors.transparent)),
      border: InputBorder.none,
      hintText: widget.placeholder,
      hintStyle: const TextStyle(fontSize: 15)),
  controller: _controller,
  onChanged: _onChanged,
)

Button

  • FloatingActionButton:悬浮按钮
  • OutlineButton:带边框按钮
  • IconButton:图标按钮
  • BackButton:返回按钮
  • MaterialButton: Material 风格按钮

InkWell

作用跟GestureDetector类似。

GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果

ClipRRect

裁剪圆角

常用属性如下:

属性 类型 描述
borderRadius BorderRadiusGeometry 圆角大小

示例:

ClipRRect(
  borderRadius: const BorderRadius.all(Radius.circular(10))
);

BackdropFilter 和 ImageFilter

实现高斯模糊

示例:

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Container(
    color: Colors.white10,
    child: child,
  ),
)

CircularProgressIndicator

圆形指示器

常用属性:

属性 类型 描述
color Color 指示器颜色

示例:

CircularProgressIndicator(
  color: primary,
)

SingleChildScrollView

滚动组件,只能接受一个子组件

常用属性:

属性 类型 描述
controller ScrollController 滚动控制器

示例:

ScrollController scrollController = ScrollController();

SingleChildScrollView(
  controller: scrollController,
)

NestedScrollView

嵌套滚动,滚动吸顶

常用属性:

属性 类型 描述
controller ScrollController 滚动控制器
headerSliverBuilder List<Widget> Function 头部(顶部)部分
body Widget 内容部分,滚动部分

示例:

NestedScrollView(
  controller: controller,
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return [
      SliverAppBar(
        // 禁止出现appBar
        automaticallyImplyLeading: false,
//            扩展高度
        expandedHeight: 160,
//            标题栏是否固定
        pinned: true,
//            定义固定空间
        flexibleSpace: FlexibleSpaceBar(
          titlePadding: const EdgeInsets.only(left: 0),
          title: _buildHead(),
          // 背景
          background: Stack(
            children: [],
          ),
        ),
      )
    ];
  },
  body: ListView(),
)

到了这里,关于给前端开发的一份 flutter 常用组件指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于nmap -O扫描中出现索尼手机的一份调研

    上次做网络安全实验的时候发现nmap扫描操作系统的结果中出现了索尼爱立信u8i手机,大为震惊,写在了实验报告中。老师看到之后建议我继续钻研一下,找出原因,于是今天空下来了,花了一点时间进行分析。 这是上周的结果 我先去金山云官网询问了客服,确认了他们使用

    2024年02月17日
    浏览(39)
  • Flutter CustomScrollView 的使用 及 常用的Sliver系列组件

    CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型。包括header,footer,CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来。

    2024年02月08日
    浏览(42)
  • Flutter开发笔记:Flutter 布局相关组件

    Flutter开发笔记 Flutter 布局与布局组件 - 文章信息 - Author: Jack Lee (jcLee95) Visit me at: https://jclee95.blog.csdn.net Email: 291148484@163.com. Shenzhen China Address of this article: https://blog.csdn.net/qq_28550263/article/details/131419782 【介绍】:本文介绍Flutter 布局相关组件。 Flutter 中提供了丰富的原生布局组

    2024年02月11日
    浏览(56)
  • Flutter 布局(一)- Container详解

    本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用。 Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Padding、Align、Center详解 Flutter 布局(三)- FittedBox、AspectRatio、ConstrainedBox详解 Flutter 布局(四)- Baseline、FractionallySizedBox、Intrins

    2024年02月04日
    浏览(39)
  • 关于工作流开发前端选型的一点个人见解(bpmn.js与LogicFlow)

    掘金2023年度人气创作者打榜中,快来帮我打榜吧~ https://activity.juejin.cn/rank/2023/writer/747323639208391?utm_campaign=annual_2023utm_medium=self_web_shareutm_source=MiyueFE 首先需要明确的一点是,本文的出发点 纯粹是针对工作流开发 的场景的选型对比,其他业务场景下建议重新调研。 什么是工作

    2024年02月20日
    浏览(50)
  • Flutter开发③——组件

    目录 Container容器组件 decoration属性  padding和maring属性 transform属性 Text组件  TextStyle参数 图片组件 Container实现圆形图片  ClipOval实现圆形图片  加载本地图片  图标组件 自带的Icons图标 借助阿里巴巴图标库自定义字体图标 ListView列表组件 垂直列表 水平列表 可左右滑动  动态

    2024年02月03日
    浏览(43)
  • flutter sliver 多种滚动组合开发指南

    https://youtu.be/4mho1kZ_YQU https://www.bilibili.com/video/BV1WW4y1d7ZC/ 有不少同学工作中遇到需要把几个不同滚动行为组件(顶部 appBar、内容固定块、tabBar 切换、tabBarView视图、自适应高度、横向滚动)黏贴成一个组件。 这时候就需要 sliver 出场了,本文将会写一个多种滚动的组合。 业务

    2024年03月10日
    浏览(49)
  • 从零基础到精通:Flutter开发的完整指南

    💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 Flutter是一种跨平台的移动应用开发框架,它允许开发者使用单一代码库构建高性能

    2024年02月05日
    浏览(55)
  • 前端常用的文档及组件库

      前端在使用过程中会用到很多的组件或者文档,需要进行引用.在此归纳自己常用的库 目录 一、W3school  官网推出教程:JS、HTML、CSS、XML等  二、MDN(mdn web docs)  三、TypeScript  四、正则表达式大全   五、常见的CSS布局  六、CSS进阶(总结)--转自作者教主鸽鸽   七、HTML DOM 事件

    2024年02月09日
    浏览(32)
  • flutter开发实战-父子Widget组件调用方法

    flutter开发实战-父子Widget组件调用方法 在最近开发中遇到了需要父组件调用子组件方法,子组件调用父组件的方法。这里记录一下方案。 父组件使用globalKey.currentState调用子组件具体方法,子组件通过方法回调callback方法调用父组件的方法。 例如示例中的 例如父组件 父组件使

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包