精华内容
下载资源
问答
  • FlatButton

    千次阅读 2016-04-03 13:02:58
    public FlatButton(Context context, AttributeSet attrs) { super(context, attrs); int cornerRadius = dp2px(context, 6); ColorDrawable originalBackground = (ColorDrawable) getBackground(); if ...


    关键就是实现平滑地改变上层 chlid drawable 的 inset。

    平滑,又是 Scroller 那一套,重画后要求重画自己。

    今天从书上看到,重画间隔是 16 毫秒。


    TransationDrawable 是改变透明度,Scroller 是改变 mScrollX,这里是要改变 inset。

    本质是一样的,利用重画间隔,不断重画,达到平滑的效果。

    public class BottomInsetTransitionDrawable extends LayerDrawable {
    
        private double bottomHeight;
    
        public BottomInsetTransitionDrawable(Drawable[] layers, int bottomHeight) {
            super(layers);
            this.bottomHeight = bottomHeight;
            mBottomInset = bottomHeight;
        }
    
        //
    
        private static final int TRANSITION_STARTING = 0;
    
        private static final int TRANSITION_RUNNING = 1;
    
        private static final int TRANSITION_NONE = 2;
    
        private int mTransitionState = TRANSITION_NONE;
    
        private long mStartTimeMillis;
    
        private int mDuration;
    
        // 实际底部内边距
        private double mBottomInset;
    
        public void startTransition(int durationMillis) {
            mDuration = durationMillis;
            mTransitionState = TRANSITION_STARTING;
            invalidateSelf();
        }
    
        public void resetTransition() {
            mBottomInset = bottomHeight;
            mTransitionState = TRANSITION_NONE;
            invalidateSelf();
        }
    
        //
    
        @Override
        public void draw(Canvas canvas) {
    
            setLayerInset(1, 0, 0, 0, (int) mBottomInset);
            // 改变 child 的 bounds
            onBoundsChange(getBounds());
            // 重绘所有 child drawable
            super.draw(canvas);
    
            Log.e("重画", mBottomInset + " " + mTransitionState);
    
            switch (mTransitionState) {
                case TRANSITION_STARTING:
                    mStartTimeMillis = SystemClock.uptimeMillis();
                    mTransitionState = TRANSITION_RUNNING;
                    break;
                case TRANSITION_RUNNING:
                    if (mStartTimeMillis >= 0) {
                        float normalized = (float) (SystemClock.uptimeMillis() - mStartTimeMillis) / mDuration;
                        normalized = Math.min(normalized, 1.0f);
                        // 根据时间流逝,改变底部内边距
                        mBottomInset = (1 - normalized) * mBottomInset;
                    }
                    break;
            }
            if (mTransitionState == TRANSITION_RUNNING && mBottomInset != 0) {
                // 重画后要求下一次重画,时间间隔 16ms
                invalidateSelf();
            }
        }
    
        //
    
        @Override
        public boolean isStateful() {
            return true;
        }
    
        @Override
        protected boolean onStateChange(int[] state) {
            if (isStatePressed(state)) {
                // 本来是设置 1000 的
                // 但时间上 0.3 秒就到底部了,剩余的 0.7 在 0.01 到 0 这个层次变化。
                // 所以才会发明差值器这种东西把。
                startTransition(300);
            } else {
                resetTransition();
            }
            return true;
        }
    
        private boolean isStatePressed(int[] states) {
            for (int s : states) {
                if (s == android.R.attr.state_pressed) {
                    return true;
                }
            }
            return false;
        }
    
    }
    public class FlatButton extends TextView {
    
        public FlatButton(Context context) {
            super(context);
        }
    
        public FlatButton(Context context, AttributeSet attrs) {
            super(context, attrs);
            int cornerRadius = dp2px(context, 6);
            
            ColorDrawable originalBackground = (ColorDrawable) getBackground();
            if (originalBackground != null) {
                GradientDrawable unpressed = new GradientDrawable();
                unpressed.setCornerRadius(cornerRadius);
                int bgColor = originalBackground.getColor();
                unpressed.setColor(bgColor);
    
                GradientDrawable pressed = new GradientDrawable();
                pressed.setCornerRadius(cornerRadius);
                int bgColorPressed = colorBurn(bgColor);
                pressed.setColor(bgColorPressed);
    
                Drawable[] d = new Drawable[]{pressed, unpressed};
                BottomInsetTransitionDrawable background = new BottomInsetTransitionDrawable(d, 12);
                setBackground(background);
                setTextColor(Color.WHITE);
                setClickable(true);
            }
        }
    
        //
    
        protected int dp2px(Context context, float dp) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (dp * scale + 0.5f);
        }
    
        /**
         * 颜色加深处理
         *
         * @param RGBValues RGB的值,由alpha(透明度)、red(红)、green(绿)、blue(蓝)构成,
         *                  Android中我们一般使用它的16进制,
         *                  例如:"#FFAABBCC",最左边到最右每两个字母就是代表alpha(透明度)、
         *                  red(红)、green(绿)、blue(蓝)。每种颜色值占一个字节(8位),值域0~255
         *                  所以下面使用移位的方法可以得到每种颜色的值,然后每种颜色值减小一下,在合成RGB颜色,颜色就会看起来深一些了
         * @return
         */
        private int colorBurn(int RGBValues) {
            //int alpha = RGBValues >> 24;
            int red = RGBValues >> 16 & 0xFF;
            int green = RGBValues >> 8 & 0xFF;
            int blue = RGBValues & 0xFF;
            red = (int) Math.floor(red * (1 - 0.2));
            green = (int) Math.floor(green * (1 - 0.2));
            blue = (int) Math.floor(blue * (1 - 0.2));
            return Color.rgb(red, green, blue);
        }
    
    }





    展开全文
  • 在使用用 FlatButton 的时候总是遇到 自带内边距,即使设置 padding: EdgeInsets.all(0) 也没有办法移除 Container( color: Colors.blue, child: FlatButton( padding: EdgeInsets.all(0), onPressed: () {}, ...

    在使用用 FlatButton 的时候总是遇到 自带内边距,即使设置 padding: EdgeInsets.all(0) 也没有办法移除

    Container(
           color: Colors.blue,
           child: FlatButton(
                 padding: EdgeInsets.all(0),
                 onPressed: () {},
                 child:Text('FlatButton', style: TextStyle(color: Colors.red)))
    

    如下图,内边距依然存在
    在这里插入图片描述
    解决办法:

    1、在 MaterialApp 中添加 buttonTheme 属性设置

    buttonTheme: ButtonThemeData(
              minWidth: 0,
              height: 0,
              padding: EdgeInsets.zero)
            
    

    使用如下:

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
            buttonTheme: ButtonThemeData(
              minWidth: 0,
              height: 0,
              padding: EdgeInsets.zero,
            ),
          ),
        );
      }
    }
    
    

    2、在FlatButton 中添加 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, 属性,
    注意:如果只单独设置 buttonTheme 或者 materialTapTargetSize 都不行,必须两个都设置才生效

    Container(
           color: Colors.blue,
           child: FlatButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 onPressed: () {},
                 child:Text('FlatButton', style: TextStyle(color: Colors.red)))
    

    在这里插入图片描述

    展开全文
  • 1.继承关系 Object > Diagnosticable > DiagnosticableTree > Widget &... RaisedButton、FlatButton、OutlineButton 2.介绍 RaisedButton Material D...

    1.继承关系

    Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > MaterialButton > RaisedButton、FlatButton、OutlineButton

    2.介绍

    RaisedButton

    Material Design中的button, 一个凸起的材质矩形按钮。

    FlatButton

    Material Design中的button,一个没有阴影的材质设计按钮。

    OutlineButton

    Material Design中的button,RaisedButton和FlatButton之间的交叉:一个带边框的背景透明的按钮,当按下按钮时,其高度增加,背景变得不透明。

    三个控件都继承于MaterialButton,查看源码会发现MaterialButton由RawMaterialButton(无主题Button)构建的。

    而RawMaterialButton与CupertinoButton是一对button组合,都继承于StatefulWidget,前者是google风格,后者IOS风格!

    RaisedButton、FlatButton、OutlineButton、CupertinoButton四种button在文章后面给出效果及示例,不对参数详解,主要对MaterialButton的创建及其参数详解。

    注意使用CupertionBUtton要导入库:import 'package:flutter/cupertino.dart';

    当然还有其他button:

    IconButton比较简单用于创建仅包含图标的按钮,参数就不再讲解;

    以下后面文章会陆续详解!

    • DropdownButton,一个显示可供选择的选项的按钮。

    • FloatingActionButton,材质应用程序中的圆形按钮。

     • InkWell,实现平面按钮的墨水飞溅部分。

    后面文章会陆续详解!

    3.创建MaterialButton

      const MaterialButton({
        Key key,
        @required this.onPressed,
        this.onHighlightChanged,
        this.textTheme,
        this.textColor,
        this.disabledTextColor,
        this.color,
        this.disabledColor,
        this.highlightColor,
        this.splashColor,
        this.colorBrightness,
        this.elevation,
        this.highlightElevation,
        this.disabledElevation,
        this.padding,
        this.shape,
        this.clipBehavior = Clip.none,
        this.materialTapTargetSize,
        this.animationDuration,
        this.minWidth,
        this.height,
        this.child,
      }) : super(key: key);

    4.参数详解

    4.1 VoidCallback onPressed

    点击激活按钮时调用的方法

    4.2ValueChanged<bool> onHighlightChanged

    按下和抬起时都会调用的方法,详看后面示例

    4.3 ButtonTextTheme textTheme

    定义按钮的基色,以及按钮的最小尺寸,内部填充和形状的默认值。

    默认为ButtonTheme.of(context).textTheme。

    也可以指定值:

    enum ButtonTextTheme {
      normal,  // 按钮文本为黑色或白色,具体取决于ThemeData.brightness
      accent,  // 按钮文本是ThemeData.accentColor
      primary,  // 按钮文本基于ThemeData.primaryColor
    }

    4.4 Color textColor

    按钮文本的颜色

    4.5 Color disabledTextColor

    未设置按钮点击回调时使用的文本颜色

    4.6 Color color

    按钮的填充颜色

    4.7 Color disabledTextColor

    未设置按钮点击回调时按钮的填充颜色

    4.8 Color highlightColor

    按钮被按下的填充颜色

    4.9 Color splashColor

    按钮被按下的水波纹颜色,默认是有值的,不要要水波纹效果设置透明颜色即可!

    4.10 colorBrightness

    按钮的主题亮度,当设置了textColor、color颜色,此值无效!

    未设置了textColor、color颜色时:

    enum Brightness {
      /// The color is dark and will require a light text color to achieve readable
      /// contrast. For example, the color might be dark grey, requiring white text.
      dark,
      /// The color is light and will require a dark text color to achieve readable
      /// contrast. For example, the color might be bright white, requiring black text.
      light,
    }

    4.11 double elevation、highlightElevation、disabledElevation

    elevation

    放置此按钮的z坐标。这可以控制凸起按钮下方阴影的大小。

    highlightElevation

    设置了按钮点击回调时按钮的阴影的大小

    disabledElevation

    未设置按钮点击回调时按钮的阴影的大小

    4.12 EdgeInsetsGeometry padding

    《Flutter Container 参数详解》 2.3节详解过,略

    4.13 ShapeBorder shape

    按钮形状, 子类才起效果!

    shape示例:

            统一四边颜色和宽度
             shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
              // 四个边分别指定颜色和宽度, 当只给bottom时与UnderlineInputBorder一致效果
    //          shape: Border(top: b, bottom: b, right: b, left: b)
              // 底部线
    //          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
              // 矩形边色
    //        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
              // 圆形边色
    //        shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
              // 体育场(竖向椭圆)
    //        shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
              // 角形(八边角)边色
    //          shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))

    4.14 Clip clipBehavior

    据此选项将剪裁(或不剪辑)内容。

    内容

    速度

    Clip.antiAlias

    剪辑具有抗锯齿功能。

    此模式具有抗锯齿裁剪边缘,以实现更平滑的外观。

    Clip.antiAliasWithSaveLayer

    在剪辑后立即剪辑具有抗锯齿和saveLayer。

    此模式不仅具有抗锯齿功能,还可以分配屏幕外缓冲区。所有后续涂料都在该缓冲液上进行,然后再进行修剪和合成。

    Clip.hardEdge

    剪辑,但不应用抗锯齿。

    此模式允许剪切,但曲线和非轴对齐的直线将呈锯齿状,因为不会对抗锯齿做出任何努力。

      Clip.none

    根本没有剪辑。

    这是大多数小部件的默认选项:如果内容没有溢出小部件边界,则不需要为剪辑支付任何性能成本。

    -

    4.15 MaterialTapTargetSize materialTapTargetSize

    内容

    MaterialTapTargetSize.

    padded

    最小点击目标大小扩展到48px乘以48px。

    MaterialTapTargetSize.

    shrinkWrap

    目标尺寸缩小到材料规格提供的最小值。

    4.16 Duration animationDuration

    定义 shape 和 elevation 的动画更改的持续时间

    4.17 double minWidth

    控件最小宽度

    4.18 double height

    控件高度

    4.19 Widget child

    内容widget。

    5.参考:

    https://docs.flutter.io/flutter/material/MaterialButton-class.html

    sdk源码

    6.效果及示例

    GIF
    标题

    代码:

    //  ---------------------------Button--------------------------------------------------
      Widget getButtons(BuildContext context) {
        return new Column(children: [
          SizedBox(height: 10),
          new Expanded(flex: 0, child: getMaterialButton(context)),
          SizedBox(height: 10),
          new Expanded(flex: 0, child: getRaisedButtonRow(context)),
          SizedBox(height: 10),
          new Expanded(flex: 0, child: getFlatButtonRow(context)),
          SizedBox(height: 10),
          new Expanded(flex: 0, child: getOutlineButtonRow(context)),
          SizedBox(height: 10),
          new Expanded(flex: 0, child: getCupertinoButton(context)),
          SizedBox(height: 10),
        ]);
      }
    
      Widget getMaterialButton(BuildContext context) {
        return MaterialButton(
          key: ValueKey("text"),
          child: Text("MaterialButton"),
          onPressed: pressedBtn(context),
          onHighlightChanged: onHighlightChanged(context),
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.blue,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
          disabledColor: Colors.grey,
          highlightColor: Colors.grey,
          // 按下的背景色
          splashColor: Colors.green,
          // 水波纹颜色
          colorBrightness: Brightness.light,
          // 主题
          elevation: 10,
          highlightElevation: 10,
          disabledElevation: 10,
          padding: EdgeInsets.all(10),
    //       MaterialButton shape 子类才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              side: BorderSide(
                  color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          animationDuration: Duration(seconds: 1),
          minWidth: 200,
          height: 50,
        );
      }
    
      Widget getRaisedButtonRow(BuildContext context) {
        return new Row(children: [
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getRaisedButton(context)),
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getRaisedButtonIcon(context)),
          SizedBox(width: 10),
        ]);
      }
    
      Widget getRaisedButton(BuildContext context) {
        return RaisedButton(
          child: Text("RaisedButton"),
          onPressed: pressedBtn(context),
          onHighlightChanged: onHighlightChanged(context),
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.blue,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
          disabledColor: Colors.grey,
          highlightColor: Colors.grey,
          // 按下的背景色
          splashColor: Colors.green,
          // 水波纹颜色
          colorBrightness: Brightness.light,
          // 主题
          elevation: 10,
          highlightElevation: 10,
          disabledElevation: 10,
          padding: EdgeInsets.all(10),
          // RaisedButton 才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              side: BorderSide(
                  color: Color(0xFFFFF00F), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          animationDuration: Duration(seconds: 1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getRaisedButtonIcon(BuildContext context) {
        return RaisedButton.icon(
          icon: Icon(Icons.menu),
          label: Text("RaisedButton.icon"),
          onPressed: pressedBtn(context),
          onHighlightChanged: onHighlightChanged(context),
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.blue,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
          disabledColor: Colors.grey,
          highlightColor: Colors.red,
          // 按下的背景色
    //      splashColor: Colors.green,// 水波纹颜色
          colorBrightness: Brightness.light,
          // 主题
          elevation: 10,
          highlightElevation: 10,
          disabledElevation: 10,
    //      padding: EdgeInsets.all(10),
          // RaisedButton 才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
              side: BorderSide(
                  color: Color(0xFFF0F00), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          animationDuration: Duration(seconds: 1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getFlatButtonRow(BuildContext context) {
        return new Row(children: [
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getFlatButton(context)),
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getFlatButtonIcon(context)),
          SizedBox(width: 10),
        ]);
      }
    
      Widget getFlatButton(BuildContext context) {
        return FlatButton(
          child: Text("FlatButton"),
          onPressed: pressedBtn(context),
          onHighlightChanged: onHighlightChanged(context),
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.yellow,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
          disabledColor: Colors.grey,
          highlightColor: Colors.grey,
          // 按下的背景色
          splashColor: Colors.transparent,
          // 水波纹颜色
          colorBrightness: Brightness.light,
          // 主题
    //      elevation: 10,
    //      highlightElevation: 10,
    //      disabledElevation: 10,
          padding: EdgeInsets.all(10),
    //       RaisedButton 才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              side: BorderSide(
                  color: Color(0xFFF9F3FF), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
          materialTapTargetSize: MaterialTapTargetSize.padded,
    //      animationDuration: Duration(seconds:1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getFlatButtonIcon(BuildContext context) {
        return FlatButton.icon(
          icon: Icon(
            Icons.menu,
            color: Colors.green,
          ),
          label: Text("FlatButton.icon"),
          onPressed: pressedBtn(context),
          onHighlightChanged: onHighlightChanged(context),
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.yellow,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
          disabledColor: Colors.grey,
          highlightColor: Colors.red,
          // 按下的背景色
          splashColor: Colors.green,
          // 水波纹颜色
          colorBrightness: Brightness.light,
          // 主题
    //      elevation: 10,
    //      highlightElevation: 10,
    //      disabledElevation: 10,
    //      padding: EdgeInsets.all(10),
          // RaisedButton 才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
              side: BorderSide(
                  color: Color(0xFF6FFF00), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
          materialTapTargetSize: MaterialTapTargetSize.padded,
    //      animationDuration: Duration(seconds:1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getOutlineButtonRow(BuildContext context) {
        return new Row(children: [
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getOutlineButton(context)),
          SizedBox(width: 10),
          new Expanded(flex: 1, child: getOutlineButtonIcon(context)),
          SizedBox(width: 10),
        ]);
      }
    
      Widget getOutlineButton(BuildContext context) {
        return OutlineButton(
          child: Text("OutlineButton"),
          onPressed: pressedBtn(context),
    //      onHighlightChanged: onHighlightChanged,
          textTheme: ButtonTextTheme.accent,
          textColor: Colors.blueAccent,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
    //      disabledColor: Colors.grey,
          highlightColor: Color(0xFF2962FF),
          // 按下的背景色
          splashColor: Colors.red,
          // 水波纹颜色
    //      colorBrightness: Brightness.light,   // 主题
    //      elevation: 10,
          highlightElevation: 10,
    //      disabledElevation: 10,
          padding: EdgeInsets.all(10),
    //       RaisedButton 才起效
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              side: BorderSide(
                  color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2)),
          clipBehavior: Clip.antiAlias,
    //      materialTapTargetSize: MaterialTapTargetSize.padded,
    //      animationDuration: Duration(seconds:1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getOutlineButtonIcon(BuildContext context) {
        return OutlineButton.icon(
          icon: Icon(
            Icons.menu,
            color: Colors.green,
          ),
          label: Text("OutlineButton.icon"),
          onPressed: pressedBtn(context),
    //      onHighlightChanged: onHighlightChanged,
          textTheme: ButtonTextTheme.normal,
          textColor: Colors.yellow,
          disabledTextColor: Colors.red,
          color: Color(0xFF82B1FF),
    //      disabledColor: Colors.grey,
          highlightColor: Colors.red,
          // 按下的背景色
          splashColor: Colors.green,
          // 水波纹颜色
    //      colorBrightness: Brightness.light,   // 主题
    //      elevation: 10,
          highlightElevation: 10,
    //      disabledElevation: 10,
          padding: EdgeInsets.all(10),
          // RaisedButton 才起效
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(12)),
          ),
          clipBehavior: Clip.antiAlias,
    //      materialTapTargetSize: MaterialTapTargetSize.padded,
    //      animationDuration: Duration(seconds:1),
    //      minWidth: 200,
    //      height: 50,
        );
      }
    
      Widget getCupertinoButton(BuildContext context) {
        return CupertinoButton(
          child: Text("CupertinoButton"),
          onPressed: pressedBtn(context),
          color: Colors.blue,
          disabledColor: Colors.grey,
          padding: EdgeInsets.all(10),
          minSize: 50,
          pressedOpacity: 0.8,
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        );
      }
    
      ValueChanged<bool> onHighlightChanged(BuildContext context) {
        return (bool b) {
          showToast(context, "onHighlightChanged:" + b.toString());
        };
      }
    
      VoidCallback pressedBtn(BuildContext context) {
        return () {
          showToast(context, "pressedBtn");
        };
      }
    
      void showToast(BuildContext context, var msg) async {
        Widget _buildToastWidget() {
          return Center(
            child: Card(
              color: Colors.black26,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
                child: Text(
                  msg,
                  style: TextStyle(
                    fontSize: 14.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          );
        }
    
        //获取OverlayState
        OverlayState overlayState = Overlay.of(context);
        //创建OverlayEntry
        OverlayEntry _overlayEntry = OverlayEntry(
            //toast靠它加到屏幕上
            builder: (BuildContext context) => Positioned(
                  //top值,可以改变这个值来改变toast在屏幕中的位置
                  top: MediaQuery.of(context).size.height * 4 / 7,
                  child: Container(
                      alignment: Alignment.center,
                      width: MediaQuery.of(context).size.width,
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 80.0),
                        child: _buildToastWidget(),
                      )),
                ));
        //显示到屏幕上。
        overlayState.insert(_overlayEntry);
        //等待2秒
        await Future.delayed(Duration(seconds: 2));
        //移除
        _overlayEntry.remove();
      }

     

    展开全文
  • Material 风格中常用的按钮有三种RaiseButton、FlatButton、OutlineButton。 这三种按钮都是继承了MaterialButton,而MaterialButton又继承自StatelessWidget。 RaiseButton:带有阴影效果的按钮,默认带有灰色背景...

    作者 | 弗拉德
    来源 | 弗拉德(公众号:fulade_me)

    Material 风格中常用的按钮有三种RaiseButtonFlatButtonOutlineButton
    这三种按钮都是继承了MaterialButton,而MaterialButton又继承自StatelessWidget

    RaiseButton:带有阴影效果的按钮,默认带有灰色背景,点击下去会有点击效果和阴影。
    FlatButton: 扁平风格按钮,点击下去会有背景颜色。
    OutlineButton: 带有边框的按钮,且边框会在点击时改变颜色。

    1. RaisedButton

    我们先来看RaisedButton的构造方法

      const RaisedButton({
        Key key,
        /// 点击后的回调方法
        @required VoidCallback onPressed,
        /// 长按后的回调方法
        VoidCallback onLongPress,
        /// 高亮时候的回调方法
        ValueChanged<bool> onHighlightChanged,
        /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
        MouseCursor mouseCursor,
        /// 文本的主题,这个跟MaterialApp的属性theme有关
        ButtonTextTheme textTheme,
        /// 文本颜色
        Color textColor,
        /// 不可点击时的文本颜色
        Color disabledTextColor,
        /// 背景颜色
        Color color,
        /// 可点击时的背景颜色
        Color disabledColor,
        /// 获取焦点时的颜色(用于Web端或PC端)
        Color focusColor,
        /// 指鼠标悬停时的颜色(用于Web端或PC端)
        Color hoverColor,
        /// 高亮时的颜色
        Color highlightColor,
        /// 水波纹颜色,按下松开会有水波纹效果
        Color splashColor,
        /// 按钮主题颜色,默认浅色
        Brightness colorBrightness,
        /// 默认时的 阴影大小
        double elevation,
        /// 选中时的 阴影大小
        double focusElevation,
        /// 指鼠标悬停时的阴影大小
        double hoverElevation,
        /// 高亮时的阴影大小
        double highlightElevation,
        /// 不可选中时的阴影大小
        double disabledElevation,
        /// 内边距 跟布局有关
        EdgeInsetsGeometry padding,
        VisualDensity visualDensity,
        /// 设置按钮的形状
        ShapeBorder shape,
        /// 切边的样式
        Clip clipBehavior = Clip.none,
        FocusNode focusNode,
        bool autofocus = false,
        MaterialTapTargetSize materialTapTargetSize,
        /// 动画的时间
        Duration animationDuration,
        /// 子控件
        Widget child,
      }) 
    

    1.1 一个最简单的RaisedButton

    RaisedButton(
        child: Text("RaisedButton"),
        onPressed: () {},
    );
    

    效果:
    2020_12_17_rased_button_tap

    1.2 不可点击状态

    RaisedButton(
        child: Text("不设置onPressed"),
        disabledColor: Colors.blue,
        disabledTextColor: Colors.red,
    );
    

    如果不设置onPressed参数,默认是不可点击的,当然我们依然可以设置不可点击时候的文字颜色和背景颜色。需要注意onPressed@required参数,不建议不传此参数。
    2020_12_17_rased_button_no_onpressed
    1.3 文本颜色

    RaisedButton(
        child: Text("textColor红色"),
        textColor: Colors.red,
        onPressed: () {},
    );
    

    textColor可以设置文字的颜色。
    2020_12_17_rased_button_text_color

    1.4 设置形状

    RaisedButton(
        onPressed: () {},
        child: Text("椭圆形"),
        shape: StadiumBorder(),
    );
    

    通过shape参数可以设置按钮的形状,常见的形状有RoundedRectangleBorder矩形、CircleBorder圆形、StadiumBorder椭圆形、BeveledRectangleBorder八边形。
    2020_12_17_rased_button_shape

    1.5 背景颜色

    RaisedButton(
        child: Text("背景颜色"),
        color: Colors.red,
        onPressed: () {},
    );
    

    通过传入color可以设置按钮的背景颜色。
    2020_12_17_rased_button_back_color

    1.6 高亮颜色

    RaisedButton(
        onPressed: () {},
        child: Text("高亮红色"),
        highlightColor: Colors.red,
    );
    

    传入highlightColor参数来设置选中时候的颜色。
    2020_12_17_rased_button_height_color

    1.7 水波纹红色

    RaisedButton(
        onPressed: () {},
        child: Text("水波纹红色"),
        splashColor: Colors.red,
    );
    

    splashColor可以帮助我们设置点击后的水波纹颜色。
    2020_12_17_rased_button_splash_color
    1.8 高亮回调

    RaisedButton(
        child: Text("高亮变化回调"),
        onPressed: () {},
        onHighlightChanged: (value) {
            print("高亮切换");
        },
    );
    

    onHighlightChanged可以接收一个回调方法,当按钮被按下并高亮的时候会回调该方法。
    1.9 长按回调

    RaisedButton(
        child: Text("长按回调"),
        onPressed: () {},
        onLongPress: () {
            print("长按回调");
        },
    );
    

    onLongPress可以接收一个长按回调方法,当按钮被长按的时候会回调该方法。

    1.10 设置阴影的大小

    RaisedButton(
        child: Text("阴影设置20"),
        onPressed: () {},
        elevation: 20.0,
    );
    

    elevation参数可以设置阴影的大小,默认的阴影比较小,可以通过此参数设置更大的阴影大小。
    2020_12_17_rased_button_elevation

    想体验以上代码运行效果,可以到我的Github仓库项目flutter_app->lib->routes->flat_button_page.dart,可以下载下来运行并体验。

    2. FlatButton

    FlatButton的构造函数参数跟RaisedButton参数基本一致,设置方式也是一样的。

      const FlatButton({
        Key key,
        /// 点击后的回调
        @required VoidCallback onPressed,
        /// 长按后的回调
        VoidCallback onLongPress,
        /// 点击 高亮后的回调
        ValueChanged<bool> onHighlightChanged,
        /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
        MouseCursor mouseCursor,
        /// 文本的主题,这个跟MaterialApp的属性theme有关
        ButtonTextTheme textTheme,
        /// 文字颜色
        Color textColor,
        /// 不可点击时的文本颜色
        Color disabledTextColor,
        /// 背景颜色
        Color color,
        /// 不可点击时的背景颜色
        Color disabledColor,
        /// 获取焦点时的颜色(用于Web端或PC端)
        Color focusColor,
        /// 指鼠标悬停时的颜色(用于Web端或PC端)
        Color hoverColor,
        /// 高亮时的颜色
        Color highlightColor,
        /// 水波纹颜色,按下松开会有水波纹效果
        Color splashColor,
        /// 按钮主题颜色,默认浅色
        Brightness colorBrightness,
        /// 内边距 跟布局有关
        EdgeInsetsGeometry padding,
        VisualDensity visualDensity,
        /// 按钮的形状
        ShapeBorder shape,
        /// 切边的样式
        Clip clipBehavior = Clip.none,
        FocusNode focusNode,
        bool autofocus = false,
        MaterialTapTargetSize materialTapTargetSize,
        /// 子控件
        @required Widget child,
      })
    

    2.1 一个最简单的FlatButton

    FlatButton(
        child: Text("FlatButton"),
        onPressed: () {},
    );
    

    2020_12_17_flat_button_normal
    我们可以看到相对比于RaisedButtonFlatButton默认扁平化风格的。

    2.2 设置形状

    FlatButton(
        onPressed: () {},   
        child: Text("椭圆形"),
        shape: StadiumBorder(),
    );
    

    通过传入shape参数可设置FlatButton的形状。需要注意的是:设置好的形状,只有当点击下去的时候才可以看到效果。
    2020_12_17_flat_button_shape
    其他的 不可点击状态、文本颜色、背景颜色、高亮颜色、水波纹红色、高亮回调、长按回调等状态的设置代码跟RaisedButton的设置方式一样。

    想体验FlatButton的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->flat_button_page.dart,可以下载下来运行并体验。

    3. OutlineButton

    我们来看OutlineButton的构造函数

    const OutlineButton({
        Key key,
        /// 点击后的回调
        @required VoidCallback onPressed,
        /// 长按后的回调
        VoidCallback onLongPress,
        /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
        MouseCursor mouseCursor,
        /// 文本的主题,这个跟MaterialApp的属性theme有关
        ButtonTextTheme textTheme,
        /// 文字颜色
        Color textColor,
        /// 不可点击时的文本颜色
        Color disabledTextColor,
        /// 背景颜色
        Color color,
        /// 获取焦点时的颜色(用于Web端或PC端)
        Color focusColor,
        /// 指鼠标悬停时的颜色(用于Web端或PC端)
        Color hoverColor,
        /// 高亮时的颜色
        Color highlightColor,
        /// 水波纹颜色,按下松开会有水波纹效果
        Color splashColor,
         /// 高亮时的阴影大小
        double highlightElevation,
        /// 边框的延时
        this.borderSide,
        /// 不可用时 边框的颜色
        this.disabledBorderColor,
        /// 选中时边框的样色
        this.highlightedBorderColor,
        /// 内边距 跟布局有关
        EdgeInsetsGeometry padding,
        VisualDensity visualDensity,
        /// 按钮的形状
        ShapeBorder shape,
        /// 切边的样式
        Clip clipBehavior = Clip.none,
        FocusNode focusNode,
        bool autofocus = false,
        /// 子控件
        Widget child,
      })
    

    3.1 简单的 OutlineButton

    OutlineButton(
        onPressed: () {},
        child: Text("OutlineButton"),
    );
    

    它的边框默认是灰色的,点击选中的时候会变为蓝色。
    2020_12_17_outline_button_normal
    3.2 Border的样式

    OutlineButton(
        child: Text("Border颜色"),
        borderSide: BorderSide(color: Colors.red, width: 2),
        highlightColor: Colors.yellow,
        highlightedBorderColor: Colors.green,
        onPressed: () {},
    );
    

    borderSide可以接收一个BorderSide的对象,该对象可以设置颜色和宽度,同样我们也可以通过设置highlightColorhighlightedBorderColor来设置选中的背景颜色和选中的边框颜色。

    2020_12_17_outline_button_border

    其他的 不可点击状态、文本颜色、高亮颜色、水波纹红色、高亮回调、长按回调等状态的设置代码跟RaisedButton的设置方式一样。

    4. IconButton

    4.1 简单的IconButton

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

    IconButton可以接收一个Icon类的的参数,Flutter自带了很多Icon详情可见这里
    4.1 带有选中提示的IconButton

    IconButton(
        icon: Icon(Icons.local_cafe),
        tooltip: "Cafe Button",
        color: Colors.red,
        onPressed: () {},
    );
    

    通过设置tooltip属性,可以设置按钮按下的弹出提示文字。我们这里设置了Cafe Button的文字。
    2020_12_18_icon_button_tool

    4.2 自定义图片的IconButton

    IconButton(
        icon: Image.asset("images/flutter_icon_100.png"),
        onPressed: () {},
    );
    

    我们同样可以提供一个Image类型的Icon,这样就满足我们设置不同的图片按钮。
    如下图:
    2020_12_18_icon_button_image

    想体验IconButton的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->icon_button_page.dart,可以下载下来运行并体验。

    想体验FlatButton的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->outline_button_page.dart,可以下载下来运行并体验。

    以上就是Material风格的按钮以及详解,如果你想了解Cupertino风格按钮,可以点击这里
    我们日常开发中大多数情况下都会使用Material风格的样式。


    公众号

    展开全文
  • Flutter里面有很多的Button组件很多,常见的按钮组件有:RaisedButton,FlatButton,IconButton,OutlineButton,ButtonBar,FloationActionButton等.. 组件 描述 RaisedButton 凸起的按钮,其实就是...
  • Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的...FlatButton :扁平化的按钮,继承自MaterialButton OutlineButton :带边框的按钮,继承自MaterialButton IconB...
  • 但是:官方不推荐使用这个,推荐使用它的子类 RaisedButton、FlatButton 和 OutlineButton,如果自定义 button 推荐使用 RawMaterialButton 1.1 属性 onPressed: 按下之后松开的回调,也就是所谓的点击事件。...
  • flutter FlatButton 按钮填充满 Container

    千次阅读 2020-07-11 09:11:44
    flutter FlatButton按钮填充满Container: Container( child: SizedBox( //使用SizedBox给子元素指定固定的宽高 width: double.infinity, //设置宽高最大 height: double.infinity, child: new FlatButton( ...
  • Flutter中设置FlatButton的高度

    千次阅读 2019-07-19 18:27:30
    实现方式:用子widget把button撑开。...FlatButton默认情况下,是刚好显示下子控件。 所以应该用button内的子控件把button撑开。 FlatButton(onPressed: (){}, child: Container( height: 60, alignment: Ali...
  • flutter FlatButton有间隔

    千次阅读 2018-12-19 14:18:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • FlatButton 按钮在默认情况下是有大小的,FlatButton 是没有提供设置按钮大小问题的,如何设置大小那么就在包裹SizedBox SizedBox( width: 50, height: 32, child: FlatButton( //为什么要设置左右paddin...
  • const FlatButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color ...
  • Flutter基础-FlatButton

    千次阅读 2019-06-24 14:59:28
    FlatButton( color: Colors.blue, textColor: Colors.white, disabledColor: Colors.grey, disabledTextColor: Colors.black, padding: EdgeInsets.all(8.0), splashColor: Colors.blueAccent, ...
  • FlatButton, 带有接口生成器样式选项的基于图层的NSButton FlatButton带接口生成器的图层NSButton公开样式选项。这是一个子类,可以轻松创建漂亮的NSButton控件。 安装( CocoaPods )配置你的Podfile以使用 ...
  • 1,原型为来自互联网上的pb9版的flatbutton。 2,升级pb12.5,解决“在sle等控件中录入值后,flatbutton原形毕露”的现象 3,相关api仍采用pbvm90.dll中的函数。 欢迎交流
  • Flutter 系列文章 总体目录 文章目录 1、RaisedButton 2、FlatButton 3、OutlineButton 4、ButtonBar 交流 RaisedButton、 FlatButton 、OutlineButton的区别 RaisedButton 带阴影的按钮 FlatButton 无阴影的按钮 ...
  • }, ), ), ) ], ), FlatButton 扁平化按钮, 与上面的突起按钮没有太大区别 FlatButton( child: Text("按钮"), color: Colors.blue, textColor: Colors.yellow, onPressed: () { print('FlatButton'); }, ), ...
  • onPressed: null, child: Text('Home'), ), FlatButton( onPressed: () { Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) => Page(title: 'About')), ); }, child: Text('About')...
  • flutter FlatButton, RaisedButton, and OutlineButton flutter Material 新的按钮变更 新的改变 FlatButton, RaisedButton, and OutlineButton 已经被 TextButton, ElevatedButton, and OutlinedButton 替换. ...
  • () {}, child: Text("FlatButton"), splashColor: Colors.grey, textColor: Theme.of(context).accentColor, color: Colors.black87, ), FlatButton.icon( icon: Icon(Icons.add), onPressed: () {}, label: Text(...
  • title: Text('FlatButton扁平按钮组件示例'), ), body: Center( child: FlatButton( onPressed: () {}, child: Text( 'FlatButton', style: TextStyle(fontSize: 24.0), ), ), ), ), ); } } ...

空空如也

空空如也

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

FlatButton