flutter FlatButton, RaisedButton, and OutlineButton

最新推荐文章于 2024-07-30 06:11:06 发布
最新推荐文章于 2024-07-30 06:11:06 发布
阅读量433 收藏
点赞数 1
分类专栏： flutter 文章标签： flutter 大前端 移动开发 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MIRINDAOFGUO/article/details/115063999
版权

flutter FlatButton, RaisedButton, and OutlineButton

flutter Material 新的按钮变更

新的改变

FlatButton, RaisedButton, and OutlineButton 已经被 TextButton, ElevatedButton, and OutlinedButton 替换. ButtonTheme 已经被 TextButtonTheme, ElevatedButtonTheme, and OutlinedButtonTheme替换。在flutter.cn/go/material-button-migration-guide中提供了有关新按钮和按钮主题类的详细迁移指南

例子

TextButton(
    style:ButtonStyle(
      padding: MaterialStateProperty.all(EdgeInsets.fromLTRB(80, 8, 80, 8)),
      foregroundColor:  MaterialStateProperty.resolveWith(getColor),
      backgroundColor: MaterialStateProperty.resolveWith(getColor),
    ),
    onPressed: () {
      print('登录');
    },
    child: Text('登录',style: TextStyle(color: Colors.white,fontSize: 20),)
),
MIRINDAOFGUO
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter 3.3.6 中FlatButton, RaisedButton, & OutlineButton找不到
闪亮的大早的博客
11-01 7468
FlatButton,, and这三个widget 已经有了新的控件替代，并且有新的主题做对应的替换即可// ...);// ...);// ...);
Flutter RaisedButton、FlatButton、OutlineButton 参数详解
陈英有
12-05 2万+
1.继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > MaterialButton > RaisedButton、FlatButton、OutlineButton 2.介绍 RaisedButton Material D...
Flutter RaisedButton FlatButton OutlineButton ButtonBar
老孟Flutter
12-11 2994
基本属性如下： onPressed 点击时触发，如果不设置此属性 Button为不可用状态 onHighlightChanged 高亮变化回调，参数：是否高亮，按下时高亮，抬起不高亮， textTheme 字体theme，属性有：ButtonTextTheme.normal、ButtonTextTheme.accent、ButtonTextTheme.primary ...
Flutter 中的 ElevatedButton 小部件：全面指南
smileKH的博客
05-22 1191
是 Flutter 的 Material 组件库中的一个按钮小部件，它具有凸起的视觉效果，当用户按下按钮时，按钮会下沉，给人一种按钮被按下的感觉。这种按钮通常用于主行动的触发，如提交表单或打开新页面。onPressed：用户点击按钮时调用的回调函数。child：按钮上显示的文本或小部件。style：用于自定义按钮的样式，包括背景颜色、文本样式等。shape：定义按钮的形状。// 按钮点击事件},primary: Colors.blue, // 按钮背景颜色。
Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
热门推荐
喻志强的博客
12-17 8万+
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下 RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton FlatButton ：扁平化的按钮，继承自MaterialButton OutlineButton ：带边框的按钮，继承自MaterialButton IconB...
浅识Flutter 基本组件之按钮组件 Raisebutton\ FlatButton\ OutlineButton按钮
qq_43336158的博客
04-01 2200
按钮组件是应用程序中用于交互的最常用的组件之一, MaterialWidget库中提供了多种按钮Widget,如 RaisedButton(凸起按钮组件)、FlatButton(扁平按钮组件）和OutlineButton(带边框按钮组件)等，它们都是直接或间接对RawMaterialButton的包装定制,从而形成不同的外观样式，所以它们的属性和使用方法基本一样.
【Flutter 2-2】Flutter手把手教程UI控件——【多图预警】按钮RaisedButton、FlatButton、OutlineButton
弗拉德的技术博客
12-17 657
作者 | 弗拉德 来源 | 弗拉德（公众号：fulade_me) Material 风格中常用的按钮有三种RaiseButton、FlatButton、OutlineButton。 这三种按钮都是继承了MaterialButton，而MaterialButton又继承自StatelessWidget。 RaiseButton：带有阴影效果的按钮，默认带有灰色背景，点击下去会有点击效果和阴影。 FlatButton: 扁平风格按钮，点击下去会有背景颜色。 OutlineButton: 带有边框的按钮，且边框会
Flutter 按钮组件之RaisedButton、OutlineButton、FlatButton、IconButton、ButtonBar、FloatingActionButton
June.1
03-22 1万+
按钮UI RaisedButton 普通按钮、颜色按钮、阴影按钮、图标按钮、圆角按钮、圆形按钮 children: <Widget>[ RaisedButton( child: Text('普通按钮'),//文本内容 onPressed: () {//点击事件 print("普通按钮"); }, ), S...
Flutter学习日记之各种按钮的使用
qq_40785165的博客
06-03 1489
本文地址：https://blog.csdn.net/qq_40785165/article/details/117457267,转载需附上此地址 大家好，我是小黑，一个还没秃头的程序员~~~ 奋斗的意义，不在于，一定会让你取得多大的成就，只是让你在平凡的日子里，活得比原来的那个自己，更好一点。 今天分享的内容是Flutter的表单组件中的各种按钮的使用，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下： 今天介绍的按钮有以下几个： RaisedB
flutter图标按钮_Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）...
weixin_39533659的博客
12-21 194
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButtonFlatButton ：扁平化的按钮，继承自MaterialButtonOutlineButton ：带边框的按钮，继承自MaterialButtonIconButton ...
RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar
06-05
此资源介绍的相关内容有：按钮组件 RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar以及自定义按钮组件 FloatingActionButton实现类似闲鱼App底部导航凸起按钮。 适合新手学习移动端开发，也适合老...
Flutter Draggable And DragTarget 拖拽控件
03-29
Draggable 拖拽控件 DragTarget 接收Draggable的控件
flutter InkWell实现水波纹点击效果
01-21
在flutter 开发中用InkWell或者GestureDetector将某个组件包起来，已添加点击事件。 GestureDetector 使用点击无水波纹出现，InkWell可以实现水波纹效果。 正常情况下使用 ： InkWell( //单击事件响应 onTap: () ...
flutter学习课件
02-26
Flutter是Google推出的一款开源UI工具包，用于构建高性能、高保真、跨平台的移动应用程序。这个“flutter学习课件”包含的资源很可能是为了帮助开发者或者初学者深入理解和掌握Flutter的基本概念、核心组件以及开发...
Flutter 仿微信长按发送语音
09-04
引用 package： 文件路径：path_provider 录制与振幅：audio_waveforms
Flutter常用命令
我叫柱子哥
07-22 840
CocoaPods 是 iOS 和 macOS 项目中常用的依赖管理工具。它的实现原理涉及依赖解析、Podspec 处理、Xcode 项目集成等多个方面。下面将详细讲解 CocoaPods 的实现原理。
Ionic 安装指南
最新发布
lly202406的博客
07-30 170
安装和开始使用 Ionic 是一个简单而直接的过程。通过遵循本指南，您应该能够在您的系统上成功安装 Ionic，并开始开发您的第一个应用程序。Ionic 提供了大量的文档和社区支持，可以帮助您在开发过程中遇到任何问题时找到解决方案。祝您编码愉快！
AvaloniaUI的学习
lishuangquan1987的博客
07-25 969
官方中文文档：https://docs.avaloniaui.net/zh-Hans/docs/welcome。
用flutter写一个关于我们的页面，内容包含app名称，版本号，功能介绍，投诉，检查新版本，底部有软件许可及服务协议，隐私保护政策，客服电话，版权信息
05-31
好的，我可以为您提供一些代码示例，帮助您完成这个页面。首先，您需要在您的Flutter项目中创建一个新的页面，例如： ```dart import 'package:flutter/material.dart'; class AboutPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('关于我们'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'App名称', style: TextStyle(fontSize: 24.0), ), Text( '版本号', style: TextStyle(fontSize: 16.0), ), Text( '功能介绍', style: TextStyle(fontSize: 16.0), ), FlatButton( child: Text( '投诉', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击投诉按钮的操作 }, ), FlatButton( child: Text( '检查新版本', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击检查新版本按钮的操作 }, ), ], ), ), bottomNavigationBar: BottomAppBar( child: Container( height: 50.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ FlatButton( child: Text( '软件许可及服务协议', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击软件许可及服务协议的操作 }, ), FlatButton( child: Text( '隐私保护政策', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击隐私保护政策的操作 }, ), FlatButton( child: Text( '客服电话', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击客服电话的操作 }, ), FlatButton( child: Text( '版权信息', style: TextStyle(fontSize: 16.0), ), onPressed: () { // 点击版权信息的操作 }, ), ], ), ), ), ); } } ``` 这个页面包含了您所需要的所有内容，您可以根据您的需求进行修改。如果您需要在其他地方调用这个页面，可以使用以下代码： ```dart Navigator.push(context, MaterialPageRoute(builder: (context) => AboutPage())); ``` 这将会打开一个包含了关于我们页面的新窗口。希望这对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值