Flutter踩坑记录

最新推荐文章于 2023-07-18 17:57:55 发布
最新推荐文章于 2023-07-18 17:57:55 发布
阅读量410 收藏
点赞数 1
文章标签： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zed0123/article/details/102820045
版权

Flutter AppBar leading以及TabView中的图片

记一次自定义appBar的leading和tabView中放入icon的踩坑记录。

过程

flutter界面appBar中leading自定义圆形图片，此界面使用了tabBar和tabBarView组合，在tabBarView中塞入自定义圆形图片。
appBar中的leading
tabBarView中塞入的圆形图片

现象

appBar的leading圆形图片和appBar的title塞入圆形图片
中间的tabBarView中塞入的圆形图片
结果可以看到appBar中的title设置这个圆形图片大小是有效果的，而appBar的leading和tabBarView直接设置这个圆形图片之后大小设置无效都是match父组件的宽高。(Ps:除了使用CircleAvatar组件还尝试使用了Container+BoxDecoration的方式设置图片的宽高，结果也是如此)

使用IconButton包裹后

appBar的leading用IconButton包裹圆形图片
tabBarView塞入使用IconButton包裹的圆形图片

效果

使用IconButton包裹的圆形图片大小是有效的

小结

疑问点:如果说使用圆形图片(CircleAvatar或者是Container+BoxDecoration)不能单独使用必须外层包裹，即使内部设置大小也无效的话，那appBar的title直接设置圆形图片为什么是有效的？猜测是否是appBar的leading和tabBarView内部是否做了什么操作是子组件宽高都match父组件，那为什么加一层IconButton包裹的情况下，图片的大小设置时有效的呢？？？

Zed0123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Flutter 基础篇（二十一）
m0_70083119的博客
05-03 699
AppBar({ Key key, this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。 this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮 this.title,// 页面标题 this.actions, // 导航栏右侧菜单 this.bottom, // 导航栏底部菜单，通常为Tab按钮组 this.elevation = 4.0, // 导航栏阴影 this.cent
Flutter学习总结（十一、Flutter基本组件第一部分)
Flutter学习总结
04-20 856
先看我们使用频率最高也是最基本的控件Text，先看下平时我们怎么使用的： 这里就定义了一个最基本的Text，然后看下他的构造方法： 结合我们在Dart中的类里面的内容，可以看到我们如果想要实现一个最基本的Text只需要传入一个data，也就是要显示的字符。其他的可选参数可以根据我们想要实现的效果来传参。 ...
Flutter学习记录
01-03
前言 最近因工作需要，重温Flutter。2018年初次尝试Flutter后写过从入门到放弃，今年重新学习过后，觉得Flutter已经可以创作想要的App了。 目前对于Flutter出现的问题，Google上基本都可以找到答案了，整体生态链也趋向成熟，唯一不太肯定的是对于Flutter的三方架包的支持，但实在不行也可以使用混合开发解决。 今天就记录下零零碎碎的知识点，针对大些的内容，后面单独写博客记录。 正题 1. 图片使用      1. 主目录下建资源目录，如：  assets img 1.5x start_page_icon_logo.p
Flutter——最详细(NavigationRail)使用教程
人生在世
07-18 3668
一个 Material Design 小部件，旨在显示在应用程序的左侧或右侧，以便在少量视图（通常在三到五个视图之间）之间导航。
Flutter学习(Tab顶部导航栏)
m0_46527751的博客
01-16 2801
Flutter学习AppBar顶部导航Tab底部导航嵌套顶部导航 AppBar 属性 描述 leading 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮 title 标题，通常显示为当前界面的标题文字，可以放组件 actions 通常使用 IconButton 来表示，可以放按钮组 bottom 通常放 tabBar，标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式
[flutter专题]详解AppBar小部件
坚果的博客
11-26 1918
大家好，我是坚果，公众号“坚果前端” AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。 以下是我们将介绍的内容： Flutter 中的 AppBar 是什么？ 应用栏布局 自定义 AppBar Flutter 中的 AppBar 是什么
flutter入门之常见的flutter问题汇总（持续更新）
不忘初心
12-28 7868
【原创不易，转载请注明出处：https://blog.csdn.net/email_jade/article/details/85317859】 1. 使用AppBar后如何去掉左边的返回箭头。左边的图标对应的是leading，源代码如下（吐槽一下，CSDN暂不支持dart语言）： Widget leading = widget.leading; if (leading ==...
flutter踩坑实录（持续更新）
weixin_38252066的博客
05-23 480
完成flutter环境安装和基础配置后，接下来就是第一个demo了，以下是遇到无法顺利进行下去的点，解决办法也是来自网络以及官方文档，希望对看到的同学有所帮助。 1、项目第一次运行，报错： Running Gradle task 'assembleDebug'... 原因：Gradle的Maven仓库在国外，so… 解决：修改为阿里云的镜像。配置如下： ①修改项目下的build.gradle文件 文件路径：项目->Android->build.gradle文件 修改内容：找到buildscri
Flutter ListTile、ExpansionTile 设置 leading 和 title之的间隔
m0_37973043的博客
09-10 5917
开发过程中使用到ListTile，但是默认的leading 和 title之的间隔太宽了，寻找了一些可用的解决办法 一、通过Transform组件 ListTile( leading: Icon(icon), title: Transform( transform: Matrix4.translationValues(-16, 0.0, 0.0), child: Text("Title text", ...
flutter菜鸟踩坑之旅–持续更新中
01-03
磨磨蹭蹭两周多终于跑出来了这个app，接下来分享下过程中主要需要注意的地方与踩过的坑。 ...export PATH=/Users/wangjuan30/Documents/development/flutter/bin:$PATH export ANDROID_HOME=/Users
flutter学习记录4点亮小心心
01-07
参考flutter中文网 自己在写的时候忘记了在onTap中写setState（）导致点不亮 import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; void main() => runApp(new MyApp());...
flutter 视频播放插件
08-17
flutter 视频播放插件。适用于flutter开发
flutter后台管理框架
06-02
省下时间来处理逻辑，最简单的后台管理框架
flutter appflutter app
最新发布
05-10
flutter appflutter appflutter appflutter app
flutter 组件
qq_45104740的博客
12-20 2128
设置背景颜色 Container( decoration: new BoxDecoration(color: Colors.pink), child: Column( children: [ title(‘3D交互’), title(‘开始训练模式’), title(‘背景音乐’), title(‘常见问题’), ], ), appBar: AppBar( backgroundColor: Colors.redAccent, title: Text(‘运动’), leading: Icon(Icons.ac
Android Studio (version 4.1)： Flutter plugin not installed and Dart plugin not installed Dart plug
鱼儿眼中的海
02-26 510
问题： Android Studio (version 4.1)： Flutter plugin not installed and Dart plugin not installed Dart plugin not installed… 主要原因是Androidstudio升级到4.1之后 安装pluging路径变了导致我们使用 flutter doctor命令之后 flutter检测不到 解决方案： 原因为AS4.1还未兼容Flutter stable，须手动切换到dev flutter channel
flutter踩坑记录
m0_48497187的博客
04-11 166
到JAVA官方下载JDK16准备学习flutter，但是在运行flutter doctor的时候，出错了。 原来是flutter只支持JDK1.8。
Flutter完整开发实战详解(三、 打包与填坑篇)| 掘金技术征文
weixin_33936401的博客
08-12 1302
作为系列文章的第三篇，继篇章一和篇章二之后，本篇将为你着重展示：Flutter开发过程的打包流程、APP包对比、细节技巧与问题处理。本篇主要描述的Flutter的打包、在开发过程中遇到的各类问题与细节，算是对上两篇的补全。  友情提示：本文所有代码均在 GSYGithubAppFlutter ，要不试试？(◐‿◑)。 一、打包 首先我们先看结果，如下表所示，是 Flutter 与 React ...
flutter 怎么记录手势晋级场中每个参赛者在比赛过程中的得分情况
06-01
在 Flutter 中记录手势晋级场中每个参赛者的得分情况可以通过使用状态管理来实现。你可以在每个参赛者对应的 Widget 中定义一个状态，用于记录当前参赛者的得分情况。比如： ```dart class ContestantWidget extends StatefulWidget { @override _ContestantWidgetState createState() => _ContestantWidgetState(); } class _ContestantWidgetState extends State<ContestantWidget> { int score = 0; void addToScore(int points) { setState(() { score += points; }); } @override Widget build(BuildContext context) { return Container( child: GestureDetector( onTap: () { addToScore(1); }, child: Text("Score: $score"), ), ); } } ``` 在上面的代码中，`_ContestantWidgetState` 中定义了一个 `score` 变量用于记录当前参赛者的得分，同时还定义了一个 `addToScore` 方法来增加得分。在 `build` 方法中，将 `score` 显示在了一个 Text Widget 中，同时通过 GestureDetector 来监听 onTap 事件，每次点击时调用 `addToScore` 方法来增加得分。 在比赛过程中，你可以根据每个参赛者的得分情况，来决定谁是当前的胜出者。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值