精华内容
参与话题
问答
  • Flutter 按钮

    2019-11-25 10:31:18
    Material组件库中的按钮 Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等。它们都是直接或间接对RawMaterialButton组件的包装定制。所以他们大多数属性都和RawMaterialButton一样...

    Material组件库中的按钮

    Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等。它们都是直接或间接对RawMaterialButton组件的包装定制。所以他们大多数属性都和RawMaterialButton一样。
    所有Material 库中的按钮都有如下相同点:

    • 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)
    • 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

    RaisedButton

    RaisedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
    在这里插入图片描述

    const RaisedButton({
        Key key,
        @required VoidCallback onPressed,
        ValueChanged<bool> onHighlightChanged,
        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,
      })
    

    属性:

    名称 类型 说明
    onHighlightChanged ValueChanged 水波纹高亮变化回调,按下返回true,抬起返回false
    textTheme ButtonTextTheme 按钮的主题
    textColor Color 文字的颜色
    disabledTextColor Color 按钮禁用时候文字的颜色
    color Color 按钮的背景颜色
    disabledColor Color 按钮被禁用的时候显示的背景颜色
    highlightColor Color 点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
    splashColor Color 水波纹的颜色
    colorBrightness Brightness 按钮主题高亮
    elevation double 按钮下面的阴影
    highlightElevation double 高亮时候的阴影
    disabledElevation double 按下的时候的阴影
    padding EdgeInsetsGeometry 内边距
    shape ShapeBorder 设置形状
    clipBehavior Clip 裁剪小部件内容
    materialTapTargetSize MaterialTapTargetSize 点击目标的最小尺寸
    animationDuration Duration 动画持续的时间
    child Widget 子Widget

    FlatButton

    在这里插入图片描述
    FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色

     const 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,
      }) 
    

    属性参见RaisedButton

    OutlineButton

    OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
    在这里插入图片描述

     const OutlineButton({
        Key key,
        @required VoidCallback onPressed,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color highlightColor,
        Color splashColor,
        double highlightElevation,
        this.borderSide,
        this.disabledBorderColor,
        this.highlightedBorderColor,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior = Clip.none,
        Widget child,
      })
    

    属性:(其他属性见上表)

    名称 类型 说明
    borderSide BorderSide 边框大小
    disabledBorderColor Color 禁用时边框颜色
    highlightedBorderColor Color 可用时按下边框颜色

    IconButton

    IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
    在这里插入图片描述
    例子:

    IconButton(
      icon: Icon(Icons.thumb_up),
      onPressed: () {},
    )
    

    带图标的按钮

    RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮
    在这里插入图片描述
    例子:

    RaisedButton.icon(
      icon: Icon(Icons.send),
      label: Text("发送"),
      onPressed: _onPressed,
    ),
    OutlineButton.icon(
      icon: Icon(Icons.add),
      label: Text("添加"),
      onPressed: _onPressed,
    ),
    FlatButton.icon(
      icon: Icon(Icons.info),
      label: Text("详情"),
      onPressed: _onPressed,
    ),
    
    展开全文
  • Flutter按钮添加背景图片及文字

    千次阅读 2019-11-19 18:42:26
    Flutter按钮添加背景图片及文字的一种方法,记录下,上代码 Widget picAndTextButton(String imgpath,String text) { return Container( width: 200, height: 60, decoration: BoxDecoration( color: Colors....

    Flutter按钮添加背景图片及文字的一种方法,记录下,上代码

    Widget picAndTextButton(String imgpath,String text) {
      return Container(
        width: 200,
        height: 60,
        decoration: BoxDecoration(
          color: Colors.white,
          image: DecorationImage(
            image: AssetImage(path),
            fit: BoxFit.fill
          ),
        ),
        alignment: Alignment.center,
        child: FlatButton(
          onPressed: _theDayBefor,
          child: Text(text),
          color: Colors.transparent,
          ),
      );
    }
    展开全文
  • Flutter按钮总结

    2020-10-16 16:56:37
    1.MateriaButton:Material安卓风格按钮 2.RaisedButton:凸起的按钮 3.FlatButton:扁平的按钮 4.IconButton:图标按钮 5.CupertinoButton:CupertinoIOS风格的按钮 6.OutlineButton:线框按钮 FlatButton( child: ...

    1.MateriaButton:Material安卓风格按钮
    2.RaisedButton:凸起的按钮
    3.FlatButton:扁平的按钮
    4.IconButton:图标按钮
    5.CupertinoButton:CupertinoIOS风格的按钮
    6.OutlineButton:线框按钮
    在这里插入图片描述

    FlatButton(
                  child: Text("扁平按钮"),
                  onPressed: (){
                    print("FlatButton");
                  },
                ),
    
               RaisedButton(
                 //将按钮改成圆角
                 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                 child: Text('立体按钮'),
                 onPressed: (){
                   print("按住显示");
                 },
               ),
                OutlineButton(
                  child: Text('立体按钮'),
                  onPressed: (){
    
                  },
                ),
                SizedBox(
                  height: 40,
                  child: CupertinoButton(
                    color: Colors.red,
                    child: Text("dada"),
                    onPressed: (){
    
                    },
                  ),
                ),
    

    button常用属性
    在这里插入图片描述

    在这里插入图片描述
    触摸反馈就是点一下按钮就会震动一下。
    若想改变按钮大小可以外包SizeBox()布局设定Width和Heigh

    展开全文
  • 主要用到了Align, Material, Circleborder, IconButton四种Widget。Align( alignment: Alignment.center, child: Material( shape: CircleBorder( side: Borde...

    主要用到了Align, Material, Circleborder, IconButton四种Widget。

    Align(
                alignment: Alignment.center,
                child: Material(
                    shape: CircleBorder(
                        side: BorderSide(
                            color: Colors.green,
                            width: 2,
                            style: BorderStyle.solid)),
                    child: IconButton(
                        icon: Icon(Icons.play_arrow),
                        iconSize: 50,
                        onPressed: () {})))

    4a9d61b29ad096bd4d4801bf69c59e49.png
    展开全文
  • Flutter按钮组件

    2020-06-13 17:09:53
    import 'package:flutter/material.dart'; class buttonDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('title'), actions:...
  • Flutter 按钮组件

    2020-01-08 15:33:02
    文件结构: 内容承接:... routes.dart import 'package:flutter/material.dart'; import '../pages/tabs.dart'; import '../pages/Button.dart'; final route...
  • flutter 按钮组件

    2020-04-16 15:30:12
    1、普通按钮RaisedButton 无法自己设置高宽,可以通过父元素或通过给child组件内部组件外包一个Padding组件来设置高宽 RaisedButton( child: onPressed 点击事件,设置后点击按钮会产生水纹动画 textTheme:...
  • 一、Flutter 常用的 Button 二、演示图如下 三、代码案例 四、参数详解 一、Flutter 常用的 Button RaisedButton:凸起的按钮,其实就是 Material Design 风格的 Button FlatButton:扁平化的按钮 ...
  • Flutter按钮集合

    2019-12-25 19:15:57
    苹果弹框 void _showTips(String title, String content) { showCupertinoDialog( context: context, builder: (BuildContext context) { return CupertinoAlertDialog( title: Text...
  • Flutter 按钮用法小记

    2020-11-17 15:11:27
    Flutter 按钮 知识是人类进步的阶梯,总结笔记就是… 额,管他的呢,挺好。那今天就聊聊 Flutter 中的按钮组件。 Flutter 中已经定义好了一些默认的按钮组件供我们直接使用,所以先请它们登场 RaisedButton: 凸起的...
  • 前言Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨...
  • ButtonBarButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。基本用法如下:ButtonBar(children: [RaisedButton(),RaisedButton(),...
  • 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么知道?比如我在原生有些变化需要告知 FlutterFlutter 又如何获知?本篇我们先解决第一个问题。即 Flutter-> 原生的通信。路由回顾...
  • 106、Flutter 按钮交互

    2019-05-16 16:25:34
    这一小节通过Flutter中的FlatButton按钮进行事件监听, 然后通过该事件进行用户的交互 主要利用FlatButton中的onPressed事件,进行响应处理操作的绑定 import 'package:flutter/material.dart'; void main() { ...
  • 文章目录ButtonFloatingActionButtonRaisedButtonFlatButtonOutlineButtonIconButton带图标的按钮...Flutter 提供了三个基本的按钮控件,即 FloatingActionButton、FlatButton 、RaisedButton、OutlineButton、Ico...
  • flutter 按钮单选封装

    2019-05-06 10:47:00
    数字是自己先写死的 List list =[ { "title": "影视特效", "type":0, }, { "title": "室内设计", "type":1 }, { "title": "游戏原画", "type":2 }, { ...
  • 前言上一篇文章我们搭建好了 Flutter 的开发环境。 Flutter 即学即用——01 环境搭建这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter。开发系统:MAC IDE:Android Studio目录1. 创建一个 Flutter 项目第一步...

空空如也

1 2 3 4 5 ... 20
收藏数 1,042
精华内容 416
关键字:

flutter按钮