zoukankan      html  css  js  c++  java
  • flutter button

    flutter button
    button类型:

    RaisedButton :    凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton
    FlatButton :        扁平化的按钮,继承自MaterialButton
    OutlineButton    :带边框的按钮,继承自MaterialButton
    IconButton    :    图标按钮,继承自StatelessWidget
    

    shape:属性

     BeveledRectangleBorder 带斜角的长方形边框
     CircleBorder 圆形边框
     RoundedRectangleBorder 圆角矩形
     StadiumBorder 两端是半圆的边框
    

    eg:

    FlatButton(
          child: Text('SimpleDialog'),
               color: Colors.green,
              // highlightColor: Colors.transparent,
                 splashColor: Colors.transparent,
                 shape: StadiumBorder(),  //两边圆角
                 onPressed: () {              
                       },
    )
    

    去除水波纹效果
    splashColor: Colors.transparent,

    自定义带渐变色button

    import 'package:flutter/material.dart';
    
    class GradientButton extends StatelessWidget {
      GradientButton({
        this.colors,
        this.width,
        this.height,
        this.onTap,
        @required this.child,
      });
    
      // 渐变色数组
      final List<Color> colors;
    
      // 按钮宽高
      final double width;
      final double height;
    
      final Widget child;
    
      //点击回调
      final GestureTapCallback onTap;
    
      @override
      Widget build(BuildContext context) {
        ThemeData theme = Theme.of(context);
    
        //确保colors数组不空
        List<Color> _colors = colors ??
            [theme.primaryColor, theme.primaryColorDark ?? theme.primaryColor];
    
        return DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: _colors),
          ),
          child: Material(
            type: MaterialType.transparency,
            child: InkWell(
              splashColor: colors.last,
              highlightColor: Colors.transparent,
              onTap: onTap,
              child: ConstrainedBox(
                constraints: BoxConstraints.tightFor(height: height,  width),
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: DefaultTextStyle(
                        style: TextStyle(fontWeight: FontWeight.bold),
                        child: child),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    
  • 相关阅读:
    UINavigationController详解
    iOS学习之UINavigationController详解与使用
    UIViewController 之LoadView详解
    UIView详解
    iOS UITableView代理方法详解
    iOS中表视图(UITableView)使用详解
    Objective-C葵花宝典第一重(内功篇)--类与对象
    关于UIScrollView事件
    iOS学习--UIScrollView 原理详解
    ios UIView
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11573758.html
Copyright © 2011-2022 走看看