首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

你知道吗,Flutter内置了10多种Button控件

禁用状态下背景颜色 highlightColor 高亮颜色,按下时的颜色 splashColor 水波纹颜色,按下松开会有水波纹效果...FlatButton FlatButton是一个扁平的按钮,用法和RaisedButton一样,代码如下: FlatButton( child: Text('Button'), color: Colors.blue...是基于Semantics, Material和InkWell创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式,而RaisedButton和FlatButton都是基于RawMaterialButton...风格的关闭按钮,本身是一个IconButton,点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。...(splashColor)和按下时的高亮颜色(highlightColor): ToggleButtons( splashColor: Colors.purple, highlightColor

2.6K00

你知道吗,Flutter内置了10多种Button控件

,总结如下: 属性 说明 textColor 字体颜色 disabledTextColor 禁用状态下字体颜色 color 背景颜色 disabledColor 禁用状态下背景颜色 highlightColor...FlatButton FlatButton是一个扁平的按钮,用法和RaisedButton一样,代码如下: FlatButton( child: Text('Button'), color: Colors.blue...RawMaterialButton RawMaterialButton是基于Semantics, Material和InkWell创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式...,而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题,相关属性可以参考RaisedButton,参数基本一样,基本用法如下: RawMaterialButton...甚至可以设置点击水波纹颜色(splashColor)和按下时的高亮颜色(highlightColor): ToggleButtons( splashColor: Colors.purple,

2.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Flutter 专题】61 图解基本 Button 按钮小结 (一)

    Child Button Widget;和尚分析源码整体可分为 RawMaterialButton 和 IconButton 两类; 其中 RaisedButton / FlatButton...和 onPressed 是必须要设置的,其余属性根据需求而适当调整; 案例尝试 和尚首先尝试最基本的 IconButton;长按会由 tooltip 提醒,点击为默认主题色; IconButton(icon...RawMaterialButton 系列 RawMaterialButton RawMaterialButton 是 MaterialButton 的基础,核心是由 Material 和 InkWell...等组成;但不可用当前 Theme 或 ButtonTheme 来计算未指定参数的默认值; 源码分析 const RawMaterialButton({ Key key, @required...没有设置宽高的属性,可根据 padding 或外层依赖 Container 适当调整位置和大小;默认最小尺寸为 88px * 36px; 案例尝试 和尚定义了一个基本的按钮,并监听其高亮改变时状态

    1.5K21

    【Flutter 专题】62 图解基本 Button 按钮小结 (二)

    凸起按钮,FlatButton 扁平按钮和 OutlineButton 边框按钮;可根据不同场景灵活运用; ?...ButtonTextTheme 为默认子元素主题,可以设置基本的三种主题样式:nomal 对应 [ThemeData.brightness];primary 对应 [ThemeData.primaryColor...Color highlightColor, // 高亮时颜色 Color splashColor, // 水波纹颜色...使用 RaisedButton 时会自带阴影效果,阴影的高度和高亮时的阴影高度均可自由设置;但是阴影的颜色应该如何处理呢,官方暂未提供阴影效果属性;和尚尝试了网上大神的方式,RaisedButton 外层依赖带模糊阴影效果的...Container;和尚借鉴并稍微调整一下,解决方案并非最佳,仅作尝试; 初始时定义一个默认的高度 height 作为阴影高度,监听按钮的 onHighlightChanged 方法更改

    1.4K41

    Flutter | 常用组件

    ,OutlineButton,等,他们都是间接或者直接对 RawMaterialButton 组件的包装定制,所以他们大多是属性都和 RawMaterialButton 一样 另外,所有的 Material...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下时的背景颜色 this.splashColor..., //点击时,水波动画中水波的颜色 this.colorBrightness,//按钮主题,默认是浅色主题 this.padding, //按钮的填充 this.shape, //外形...,如果需要去除背景,可通过将背景颜色设置为透明来实现,将 color: Colors.blue 替换为 color: Color(0x000000) 即可 FlatButton 是没有 阴影的,这样总会感觉差了点啥...FocusScopeNode 来控制,默认情况下,焦点由FocusScope来管理,它代表焦点控制范围,可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。

    11.4K30

    Flutter第4天--基础控件(下)+Flex布局详解

    图片的颜色混合模式.png ---- Row和Column应该说是非常常用的控件,其中有几个属性挺重要, 本文最后,我将对Flex布局(Row和Column的父类)进行细致的讲解,希望你不要错过。...图片的颜色混合模式.png 重复模式,脑子想想也就知道了,这里就不演示了 ---- 1.4:使用Image的方法加载图片 这个等到文件读取再提一下,基本字段和Image是一样的,所以不用担心。...: Colors.blue, ); ---- 2.FlatButton--平的按钮 FlatButton相当于精简版的RaisedButton,没有阴影凸起效果 可见源码里关于elevation都被过滤了...是Row和Column的老爸,现在先忘掉Row和Column 等你认清Flex怎么玩的,Row和Column 也就清楚了 1.先看Flex的的属性 可以看出direction是必须的,类型和枚举都在下面列出了...c2和c3,最终c2和c3的长度是一样的 如果同时Expanded--c1,c2和c3,最终c1,c2,c3长度都是一样的 ?

    2.2K30

    15.Flutter学习之路按钮组件系列

    FlatButton:扁平化的按钮 OutlineButton:线框按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮 RaisedButton 属性 描述 textColor...文本颜色 color 按钮颜色 disabledColor 按钮被禁用时的颜色 disabledTextColor 按钮被禁用时的文本颜色 splashColor 点击按钮时水波纹的颜色 highlightColor...点击(长按)按钮后按钮的颜色 elevation 阴影的范围,值越大阴影范围越大 padding 内边距 shape 设置按钮形状 FloatingActionButton 属性 描述 child...子视图,一般为Icon tooltip FAB被长按时显示,也是无障碍功能 backgroundColor 背景颜色 elevation 未点击时的阴影 highlightElevation 点击时阴影值...,默认12.0 onPressed 点击事件回调 shape 可以定义FAB的形状等 mini 是否是mini类型默认false 仿咸鱼首页居中的Button Demo class Tabs extends

    58110

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

    FlatButton、RaisedButton、OutlineButton 实际上,FlatButton、RaisedButton和OutlineButton这三个按钮组件的内部属性基本都是一样的,所以我接下来以...textColor,文本颜色 color,按钮的背景颜色 disabledColor,按钮禁用时的背景颜色 disabledTextColor,按钮禁用时的文本颜色 splashColor,点击按钮时水波纹的颜色...highlightColor,点击(长按)按钮后按钮的背景颜色 elevation,阴影的范围,值越大阴影范围就越大 padding,内边距 shape,设置按钮的形状 下面是代码实例: Column...上述例子我都是以RaisedButton为例来演示的,实际上,RaisedButton、FlatButton和OutlineButton这三者的使用都是完全一样的。...实际上,RaisedButton是立体效果的,而FlatButton是扁平化的平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果的。

    9.8K31

    Flutter 密码锁定屏幕

    Flutter 让我对高效构建令人愉悦的UI很感兴趣,而且它允许您同时为两个平台创建。直到最近一年,我一直使用touchID和FaceID作为身份验证工具。...在任何情况下,如最新的Andriod先决条件所指出的那样,您需要在生物识别认证被破坏或受损的偶然机会上提供选择性的认证策略。 在在本文中,我们将探讨「Flutter中」 的「密码锁定屏幕」。...屏幕可适应颜色,大小,文本样式等。它将显示在flutter应用程序中使用密码屏幕时如何解锁屏幕。 该演示视频演示了如何在Flutter中创建密码锁定屏幕。...我们将在按钮内添加填充,颜色,文本和onPressed方法,并在此方法上添加**_showLockScreen()**小部件。当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。...「在屏幕内部,我们将添加标题,内置的圆圈配置和键盘。我们将添加一个」passwordEnteredCallback」方法。在此方法中,添加_passcodeEntered小部件,我们将在下面进行定义。

    5K30

    【Flutter 专题】易忽略的【小而巧】的技术点汇总 (一)

    InkWell 水波纹效果 和尚在 Android的项目中很多需要水波纹的点击效果,Flutter当然也提供了类似的效果,除了 FlatButton按钮系列外,Flutter还提供了 InkWell...注意事项: 使用 InkWell时内外层均不建议添加背景色,InkWell默认的水波纹颜色很浅,背景色会遮挡波纹效果; 通过修改 splashColor: Colors.greenAccent,属性可以动态修改水波纹的波纹颜色...,但如果修改高亮色属性 highlightColor,则相当于修改背景色; 请一定添加 InWell手势触发事件,如 onTap等。...: 20.0,为每一行之间的间距;当为纵向排列时,则相反。...---- 和尚刚接触 Flutter时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~

    1.1K31

    Flutter开发中的一些Tips

    4.善用Theme ---- Flutter 在开发中,让人诟病的就是大量的嵌套,而我们只能尽量避免。...,比如FlatButton的默认宽度为88,高度为36,但是FlatButton中没有直接修改的属性,网上好多的方法都是通过包一层Container去修改,不仅增加的嵌套,有些需求还不能达到。...所以善用Theme可以让你省时省力,不过缺点就是你需要去翻翻源码,寻找使用这些Theme的地方。 5.注意平台差异 ---- 注意部分组件在Android与IOS平台之间的差异。...使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它的颜色和形状。...所以打包后最好检查一下AndroidManifest.xml文件,避免此类缓存造成的问题。

    2.2K30

    AngularDart4.0 高级-属性(Attribute)指令 顶

    当然,你可以用标准的JavaScript访问DOM,并手动添加事件监听器。 这种方法至少有三个问题: 你必须正确的写下监听器。 当指令被销毁时,代码必须分离监听器以避免内存泄漏。...您必须将指令的highlightColor属性重命名为myHighlight,因为这是现在的颜色属性绑定名称。...目前,默认的颜色 - 直到用户选择高亮颜色为止的颜色 - 被硬编码为“red”。 让模板开发人员设置默认颜色。...开发人员应该能够编写下面的模板HTML绑定到AppComponent.color并回退到“violet”作为默认颜色。...但是组件或指令不应该盲目地信任其他组件和指令。 默认情况下,组件或指令的属性是隐式绑定的。从Angular绑定角度来看,它们是私密的。

    3.2K10

    文本、图片和按钮在Flutter中怎么用

    与iOS、Android和React类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片和按钮,则是这些不同的UI框架中构建视图都要用到的三个最基本的控件。...按钮 通过按钮,我们可以响应用户的交互事件。Flutter提供了三个基本的按钮控件:FloatingActionButton、FlatButton和RaisedButton。...RaisedButton:凸起的按钮,默认带有灰色背景,被点击后灰色背景会加深。 FlatButton:扁平化的按钮,默认透明背景,被点击后会呈现灰色背景。...下面代码中,我分别定义了FloatingActionButton、FlatButton和RaisedButton,它们的功能完全一样,在点击时打印一段文字: FloatingActionButton(...因为按钮背景颜色是浅色的,为避免按钮文字看不清楚,我们通过设置按钮主题 colorBrightness 为 Brightness.light ,保证按钮文字颜色为深色。 展示效果如下: ?

    7.7K20
    领券