【Flutter学习】基本组件之基本按钮组件

一,概述

  • 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件。一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件。无论哪种风格,都是通用的。  
  • 概述Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButtonFlatButtonIconButtonOutlineButtonButtonBarFloatingActionButton 等。 
    • RaisedButton :凸起的按钮,其实就是 Material Design 风格的 Button
    • FlatButton :  扁平化的按钮
    • OutlineButton:线框按钮
    • IconButton : 图标按钮
    • ButtonBar:   按钮组
    • FloatingActionButton:浮动按钮

二,常用属性

  在flutter中,按钮组件有以下常用属性:

  • onPressed : 必填参数,按下按钮时触发的回调,接收一个 方法,传 null 表示按钮禁用,会显示禁用相关 样式 
  • child :文本控件
  • textColor :文本颜色 
  • color :文本颜色 
  • disabledColor :按钮禁用时的颜色 
  • disabledTextColor :按钮禁用时的文本颜色 
  • splashColor :点击按钮时水波纹的颜色
  • highlightColor :点击(长按)按钮后按钮的颜色
  • elevation :阴影的范围,值越大阴影范围越大
  • padding :内边距
  • shape  :设置按钮的形状

三,基本使用

  • RaisedButton :凸起的按钮,其实就是 Material Design 风格的 Button
    • 构造函数
      RaisedButton({
          Key key,
        //点击按钮的回调出发事件
          @required VoidCallback onPressed,
        //水波纹高亮变化回调
          ValueChanged<bool> onHighlightChanged,
        //按钮的样式(文字颜色、按钮的最小大小,内边距以及shape)[ Used with [ButtonTheme] and [ButtonThemeData] to define a button's base
      //colors, and the defaults for the button's minimum size, internal padding,and shape.]
          ButtonTextTheme textTheme,
          //文字颜色
          Color textColor,
          //按钮被禁用时的文字颜色
          Color disabledTextColor,
          //按钮的颜色
          Color color,
          //按钮被禁用时的颜色  
          Color disabledColor,
          //按钮的水波纹亮起的颜色
          Color highlightColor,
          //水波纹的颜色
          Color splashColor,
          //按钮主题高亮
          Brightness colorBrightness,
          //按钮下面的阴影长度
          double elevation,
          //按钮高亮时的下面的阴影长度
          double highlightElevation,
          double disabledElevation,
          EdgeInsetsGeometry padding,
          ShapeBorder shape,
          Clip clipBehavior = Clip.none,
          MaterialTapTargetSize materialTapTargetSize,
          Duration animationDuration,
          Widget child,
        }
    • code
      RaisedButton(
                  textTheme: ButtonTextTheme.accent,
                  color: Colors.teal,
                  highlightColor: Colors.deepPurpleAccent,
                  splashColor: Colors.deepOrangeAccent,
                  colorBrightness: Brightness.dark,
                  elevation: 50.0,
                  highlightElevation: 100.0,
                  disabledElevation: 20.0,
                  onPressed: () {
                    //TODO
                  },
                  child: Text(
                    'RaisedButton',
                    style: TextStyle(color: Colors.white, fontSize: 40),
                  ),
                )
    • 效果


  • FlatButton :  扁平化的Material按钮
    • 构造函数
      FlatButton({
          Key key,
          @required VoidCallback onPressed,
          ValueChanged<bool> onHighlightChanged,
          ButtonTextTheme textTheme,
          Color textColor,
          Color disabledTextColor,
          Color color,
          Color disabledColor,
          Color highlightColor,
          Color splashColor,
          Brightness colorBrightness,
          EdgeInsetsGeometry padding,
          ShapeBorder shape,
          Clip clipBehavior = Clip.none,
          MaterialTapTargetSize materialTapTargetSize,
          @required Widget child,
        })
    • code
      FlatButton(
              onPressed: () {},
              child: Text(
                "FlatBtn",
                style: TextStyle(fontSize: 20, color: Colors.deepPurple),
       ));
    • 效果

  • OutlineButton:线框按钮(OutlineButton是一个有默认边线且背景透明的按钮,也就是说我们设置其边线和颜色是无效的,其他属性跟MaterialButton中属性基本一致)
    • 构造函数
      const OutlineButton({
          Key key,
          @required VoidCallback onPressed,
          ButtonTextTheme textTheme,
          Color textColor,
          Color disabledTextColor,
          Color color,
          Color focusColor,
          Color hoverColor,
          Color highlightColor,
          Color splashColor,
          double highlightElevation,
          this.borderSide,
          this.disabledBorderColor,
          this.highlightedBorderColor,
          EdgeInsetsGeometry padding,
          ShapeBorder shape,
          Clip clipBehavior,
          FocusNode focusNode,
          Widget child,
        }) : assert(highlightElevation == null || highlightElevation >= 0.0),
             super(
               key: key,
               onPressed: onPressed,
               textTheme: textTheme,
               textColor: textColor,
               disabledTextColor: disabledTextColor,
               color: color,
               focusColor: focusColor,
               hoverColor: hoverColor,
               highlightColor: highlightColor,
               splashColor: splashColor,
               highlightElevation: highlightElevation,
               padding: padding,
               shape: shape,
               clipBehavior: clipBehavior,
               focusNode: focusNode,
               child: child,
             );
    • code
      /*带边线的按钮*/
      class outlineBtn extends StatelessWidget {
        _log() {
          print("点击了边线按钮");
        }
      
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return OutlineButton(
            onPressed: _log,
            child: Text("边线按钮"),
            textColor: Colors.red,
            splashColor: Colors.green,
            highlightColor: Colors.black,
            shape: BeveledRectangleBorder(
              side: BorderSide(
                color: Colors.red,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
          );
        }
      }
    • 效果

  • IconButton : 图标按钮(图标按钮,按下时会产生水波纹效果)
    • 构造函数
      IconButton({
      //这几个属性跟前面讲的几个差不多,这里就不再讲了。如有疑问,请留言。
          Key key,
          this.iconSize = 24.0,
          this.padding = const EdgeInsets.all(8.0),
          this.alignment = Alignment.center,
          @required this.icon,
          this.color,
          this.highlightColor,
          this.splashColor,
          this.disabledColor,
          @required this.onPressed,
          this.tooltip
        })
    • 示例图

    • 效果

  • ButtonBar:   按钮组(水平排列的按钮组)
    • 构造函数
      const ButtonBar({
          Key key,
      //子组件的间隔样式
          this.alignment = MainAxisAlignment.end,
          this.mainAxisSize = MainAxisSize.max,
      //子children
          this.children = const <Widget>[],
        })
    • code

      class FlutterButtonBar extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return ButtonBar(children: <Widget>[
            Text("ButtonBar0"),
            Icon(Icons.ac_unit),
            Text("ButtonBar1")
          ], );
        }
      }

       

    • 效果

        
  • FloatingActionButton:浮动按钮
    • 构造函数
      FloatingActionButton({
          Key key,
          //  按钮上的组件,可以是Text、icon, etc.
          this.child,
          //长按提示
          this.tooltip,
          // child的颜色(尽在child没有设置颜色时生效)
          this.foregroundColor,
          //背景色,也就是悬浮按键的颜色
          this.backgroundColor,
          this.heroTag = const _DefaultHeroTag(),
          //阴影长度
          this.elevation = 6.0,
          //高亮时阴影长度
          this.highlightElevation = 12.0,
          //按下事件回调
          @required this.onPressed,
          //是小图标还是大图标
          this.mini = false,
          //按钮的形状(例如:矩形Border,圆形图标CircleBorder)
          this.shape = const CircleBorder(),
          this.clipBehavior = Clip.none,
          this.materialTapTargetSize,
          this.isExtended = false,
        })
    • code
      FloatingActionButton(
            child: Icon(Icons.access_alarm),
            tooltip: "ToolTip",
            foregroundColor: Colors.white,
            backgroundColor: Colors.deepPurple,
            shape: const Border(),
            onPressed: () {
              //click callback
            },
          )
    • 效果



 

 

 

 

 

 

原文地址:https://www.cnblogs.com/lxlx1798/p/11061175.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“f...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在日常操作中,相信很多人在Flutter怎么使用Android原生播放器问题上存在疑惑,小编查阅了各式资料,整...
Flutter开发的android端如何修改APP名称,logo,版本号,具体的操作步骤:修改APP名称找到文件:android\\app\\src\\main\\AndroidManifest.xml
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾初识路由概念路由的概念由来已久,包括网络路由、后端路由,到现在广为流行的前端路由。无论路由的概念如何应用,它的核心是一个路由映射表。比如:名字 detail 映射到 DetailPage 页面等。有了这个映射表之后,我们就可以方便的根据名字来完成路由的转发
前提:针对Android开发者(windows系统下),已安装Git,AndroidStudio(建议4.0+版本)一.下载Flutter SDK地址:https://flutter.dev/docs/development/tools/sdk/releases,在 Stable channel (Windows)里面下最新版本即可。Flutter的渠道版本会不停变动,请以Flutter官网为准。在中国,要想正常获取安装包列表或下载安装包,可能需要翻墙,也可以去Flutter github项目下去下载安
一、变量变量是一个引用,根据Dart中“万物皆对象”原则,即变量存储的都是对象的引用,或者说它们都是指向对象。1.1.声明变量://1.不指定类型var name = 'aaa';//2.明确指定类型String name = 'aaa';因为有类型推导,所以两种实现效果一样,官方推荐在函数内的本地变量尽量使用var声明。在变量类型并不明确的情况下,可以使用dynamic关键字//3.使用dynamic关键字dynamic name = 'aaa';1.2.默认值未初始化的变量
前言Flutter2.0发布不久,对web的支持刚刚进入stable阶段。初学几天,构建web应用时候碰到一些问题,比如中文显示成乱码,然后加载图片出现图片跨域问题:Failed to load network image...Trying to load an image from another domain?1.开启web端构建:使用下面这个命令才可以开启Web端构建的支持flutter config --enable-web提示我们:重新启动编辑器,以便它们读取新设置。2.重
一.Flutter打Android release包的步骤:1.为项目创建一个.jks签名文件(很简单,跳过)2.创建一个文件key.properties,直接复制下面key.properties位置如图:在里面输入一下内容:storePassword=iflytekkeyPassword=iflytekkeyAlias=teachingmachinestoreFile=E:/teacher/app/keys/TeachingMachine.jks输入你自己的passwork以及
1 问题Android原生向js发消息,并且可以携带数据2 实现原理Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据Android注册关键代码reactContext.getJSModule(DeviceEventManagerModule.RCT...
1 Flexbox布局1) flexDirection 可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列2) justifyContent 决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式 有flex-start、center、flex-end、space-around...
1 实现的功能在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.2 测试DemoApp.js文件如下...
1 问题在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数2 测试代码Student.js文件如下'use strict';import React from 'react'import {NativeModules, NativeEventEmitter, DeviceEventEmitter,Ale...
1 简单部分代码export default class App extends Component&amp;lt;Props&amp;gt; { render() { return ( &amp;lt;View {styles.container}&amp;gt; &amp;lt;View {styles.welcome}&amp;gt; &amp;l...
1 怎么实现发送和接收事件理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现//增加监听DeviceEventEmitter.addListener//取消监听//this.emitter.remove();这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客React Native之Android原生通过Dev...
1、Component介绍一般Component需要被其它类进行继承,Component和Android一样,也有生命周期英文图片如下2 具体说明1)、挂载阶段constructor()//构造函数,声明之前先调用super(props)componentWillMount()//因为它发生在render()方法前,因此在该方法内同步设置状态...
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮TouchableHighlight 背景会在用户手指按下时变暗TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果TouchableOpacity指按下时降低按钮的透明度,而不会改变背景的颜色TouchableWithoutFeedbac...
1 问题部分代码如下class HomeScreen extends React.Component { render() { return ( &amp;lt;View {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&amp;gt; &amp;lt;Text&amp;gt;Home Scre...
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Pla...