首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    『Flutter』常用组件 按钮、图片

    1.前言 经过上一篇文章的学习,我们大家可以了解到布局相关的组件,但是在实际开发中,我们还需要使用到其他的组件,比如按钮、图片、文本、输入框等等,这些组件都是我们在开发中经常使用的,所以本篇文章我们就来学习一下这些常用组件...2.常用组件 在Flutter中,有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括: ElevatedButton:这是一个凸起的按钮,常用于主要的操作。...它有默认的阴影和灰度效果,当按下时会有视觉反馈。 FlatButton(现在称为TextButton):这是一个无阴影的平面按钮,通常用于不太重要的操作。它在按下时不会改变外观,提供简洁的视觉效果。...OutlineButton(现在称为OutlinedButton):这个按钮有一个边框,但没有背景色。当按下时,边框和文字颜色会变化,适用于需要强调边框而非背景色的场景。...MaterialButton:这是一个更通用的按钮组件,可以高度自定义,包括形状、颜色、阴影等。 DropdownButton:这是一个下拉按钮,允许用户从一系列项中选择一个。

    56831

    Flutter Button(按钮控件)

    Material 组件库中提供了多种按钮组件,它们都有如下共同属性。 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。...2、按钮类型已经含义 不同的Button拥有不同的功能,正确使用对应的Button可以事半功倍。 Button 含义 MaterialButton 默认按钮,扁平,背景透明。按下后,会有背景色。...RaisedButton "漂浮"按钮,带有阴影和背景。按下后,阴影会变大。 FlatButton 扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。...OutlineButton 外边框按钮,可设置按钮外边框颜色。 ButtonBar 水平布局的按钮容器,可放置多个Button或Text。...按下后,阴影会变大。也是应用最常见的按钮。 示例见图一。

    8K11

    《Flutter》-- 4.Flutter组件基础

    AppBar的基本属性如下: 1)leading:标题左边的图标按钮,默认是一个返回箭头样式的按钮。 2)title:导航栏标题。...4.3.2 按钮组件 Materail组件库中常见的按钮组件: RaisedButton:默认是带有阴影和灰色背景的按钮,按下后阴影会变大; FlatButton:默认是背景透明并不带阴影的按钮,按下后会有背景色...; OutlineButton:默认是一个带有边框、不带阴影且背景透明的按钮,按下后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个可点击的图标按钮,不支持文字,默认没有背景,点击后会出现背景...所有Materail组件库的按钮都有两个相同点:一是按下时会有水波动画,另一个是都有一个onPressed属性来设置单击回调。...; BoxFit.cover:默认填充规则,在保证长宽比不变的情况下缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁

    12.5K30

    Flutter跨平台移动端开发丨WillPopScope、InheritedWidget、Theme

    WillPopScope(返回事件拦截器) InheritedWidget(数据传递与共享) Theme (主题控制) ---- WillPopScope(返回事件拦截器) 可防止误触情况的发生,也可监听返回按钮点击事件...此回调方法返回 true 时退出,返回 false 时不会退出 child:子元素 import 'package:flutter/material.dart'; /** * @des WillPopScope...Color accentColor, // 次级色,决定大多数子元素的颜色 Color dividerColor, // 分割线的颜色 ButtonThemeData buttonTheme..., // 按钮的主题 Color cursorColor, // 输入框光标的颜色 String fontFamily, // 文字的字体 IconThemeData iconTheme...Icons.airport_shuttle), Text(" 切换") ] ), // 在 Theme 中也可设置局部保持自己的

    1.3K30

    Flutter 的按钮,看这篇文章就够了

    RaisedButton为例来详细介绍一下这三类按钮组件该怎么去使用。...首先来看一下按钮组件的属性: onPressed,必填参数,按下按钮时触发的回调,接收一个方法,传null值表示按钮禁用,会显示禁用相关样式 child,表示按钮展示状态的Widget,一般为一个文本组件...textColor,文本颜色 color,按钮的背景颜色 disabledColor,按钮禁用时的背景颜色 disabledTextColor,按钮禁用时的文本颜色 splashColor,点击按钮时水波纹的颜色...接下来我就来比较一下这三者的展示效果。...IconButton、ButtonBar、自定义按钮组件 IconButton这个组件一般是用在定义顶部导航栏上的按钮: appBar: AppBar( centerTitle

    9.8K31

    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

    Scaffold 组件的关键属性appBar: 一个位于顶部的应用栏(AppBar),通常包含标题、导航按钮和其他操作项。body: 主体内容区域,用于放置应用的主要内容。...再对注册按钮进行调整:我们对按钮加宽度,加背景色,这里需要知道扩展知识,flutter 中对颜色表达 有4种方式,使用颜色常量,2. 使用 ARGB 表示颜色,3. 使用十六进制表示颜色,4....以下是对两者的详细比较:OutlinedButton视觉特点:具有边框(outline),通常为黑色或灰色。背景是透明的,不会覆盖其下的内容。按下时只有边框颜色会发生变化,背景保持不变。...适用场景:当需要突出按钮的轮廓而不是整体填充时使用。适合搭配浅色背景或者当希望按钮看起来更轻盈时。样式定制:可以通过style属性来自定义边框宽度、颜色等样式。...**IconButton**特点:专门用于显示图标,可以设置图标大小和颜色。适用场景:适合在界面中需要快速执行操作的图标按钮。5.

    8110

    Flutter 中使用Chip 小部件【Flutter专题30】

    本文是关于 Flutter 中的 Chip 小部件。我们将大致了解小部件的基本原理,然后通过代码来实现它。事不宜迟,让我们开始吧。 概述 典型的chip是一个圆角的小盒子。...shadowColor }) 只有label属性是必需的,其他是可选的。一些常用的有: avatar:在标签前显示一个图标或小图像。 backgroundColor : chip的背景颜色。...我们将使用Wrap小部件作为chip列表的父级。当当前行的可用空间用完时,筹码会自动下行。由于Wrap 小部件的间距属性,我们还可以方便地设置chip之间的距离。...截屏: image-20220125100331474 代码: Scaffold( appBar: AppBar( title: const Text('大前端之旅'),...在下一个示例中,chip是可交互的。 复杂示例:动态添加和移除筹码 应用预览 chip 我们要构建的应用程序包含一个浮动操作按钮。按下此按钮时,将显示一个对话框,让我们添加一个新chip。

    2.9K20

    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调

    一切就绪后还是报错,依赖也是也正确的,终于我测试,把lib目录去掉,就成功了想了一下,那么为啥呢,原来我定义目录已经是path: .....观察了下样式基本一致因此我们复制注册页面过来,这里有很多地方细节都需要修改,特别是社交登录下方那个是图片才可以实现,我们先增加一下login按钮点击 后跳转到 smslogin.dart要给 login...保持状态当你需要保持某个状态时(例如在列表中拖动排序项目),key 参数可以确保小部件在重建时保持其状态。...例如,在一个可变顺序的列表中,如果每个项目都有唯一的 key,那么在列表项被重新排列时,它们的状态仍能正确保持。3. 控制小部件重建key 参数可以帮助Flutter引擎决定是否需要重建小部件。...UniqueKey: 保证每次创建时都唯一,适用于需要绝对唯一性的场景(但不能用于状态保持)。

    6610

    Flutter学习笔记:BottomNavigationBar实现多个Navigation

    最近我研究了一下Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮时,Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...MaterialColor``的所有颜色阴影的ListView。...如果我们现在运行应用程序,我们可以看到推送在选择列表项时正常工作,并且BottomNavigationBar保持不变。 棒极了!? ?...One more thing 如果我们在Android上运行应用程序,当我们按下后退按钮时,我们会发现一个有趣的现象: ?...如果我们再次运行应用程序,我们可以看到按下后退按钮会解除所有推送路线,只有当我们再次按下它时我们才会离开应用程序。 ?

    4.3K20

    Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

    【小结一下刚刚的跳转并传输数据的方式】 上面的方式是 —— 在跳转目的页中, 准备一个构造函数和一个全局变量,用于接收数据, 跳转到目的页时,创建一个目的页实例,并把数据传给其构造函数,完成传递;...primaryColor, primaryColor是什么颜色, 各个页面的 AppBar等组件 也默认为什么颜色; 如下示例, 我们稍微改一下main.dart的primaryColor,...上述的单独设置指的是, 在某个页面中,为该页面的appBar单独设置背景颜色, 这样就会覆盖主页的默认主题颜色, 【但是如要尽量保持主题的一致性, 建议不要对子页面的这些 相关主题属性 进行修改..., // 有输入焦点 按钮的颜色 默认:ThemeData.focusColor focusColor: Colors.tealAccent, // 指针悬停时 按钮的颜色...: Colors.tealAccent, // // 指针悬停时 按钮的颜色 默认:ThemeData.hoverColor // hoverColor: Colors.white

    3.7K10
    领券