Skip to content

Latest commit

 

History

History
216 lines (197 loc) · 7.2 KB

11.flutter RaisedButton.md

File metadata and controls

216 lines (197 loc) · 7.2 KB

一、常用属性

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,//可以通过这个设置禁用或启用控件
    ValueChanged<bool> onHighlightChanged,//水波纹高亮变化回调,按下返回true,抬起返回false
    ButtonTextTheme textTheme,//按钮的主题
    Color textColor,//文字的颜色
    Color disabledTextColor,//按钮禁用时候文字的颜色
    Color color,//按钮的背景颜色
    Color disabledColor,//按钮被禁用的时候显示的颜色
    Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
    Color splashColor,//水波纹的颜色
    Brightness colorBrightness,//按钮主题高亮
    double elevation,//按钮下面的阴影
    double highlightElevation,//高亮时候的阴影
    double disabledElevation,//按下的时候的阴影
    EdgeInsetsGeometry padding,//设置padding
    ShapeBorder shape,//设置形状
    Clip clipBehavior = Clip.none,//根据此选项,内容将被剪裁(或不剪辑)
    MaterialTapTargetSize materialTapTargetSize,//配置点击目标的最小尺寸
    Duration animationDuration,//定义形状和高程的动画更改的持续时间
    Widget child,//设置子控件
    })

二、一个完整的例子

image

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Text Demo'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
//  const RaisedButton({
//    Key key,
//    @required VoidCallback onPressed,
//    ValueChanged<bool> onHighlightChanged,//水波纹高亮变化回调,按下返回true,抬起返回false
//    ButtonTextTheme textTheme,//按钮的主题
//    Color textColor,//文字的颜色
//    Color disabledTextColor,//按钮禁用时候文字的颜色
//    Color color,//按钮的背景颜色
//    Color disabledColor,//按钮被禁用的时候显示的颜色
//    Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
//    Color splashColor,//水波纹的颜色
//    Brightness colorBrightness,//按钮主题高亮
//    double elevation,//按钮下面的阴影
//    double highlightElevation,//高亮时候的阴影
//    double disabledElevation,//按下的时候的阴影
//    EdgeInsetsGeometry padding,
//    ShapeBorder shape,//设置形状
//    Clip clipBehavior = Clip.none,
//    MaterialTapTargetSize materialTapTargetSize,
//    Duration animationDuration,
//    Widget child,
//  })
  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[
            RaisedButton(
              onPressed: null,//设置是否禁用、或启用控件
              child: const Text('Disabled Button '),
            ),
            RaisedButton(
              onPressed: () {
              },
              child: const Text('Enabled Button'),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text("textColor文本的颜色,color背景颜色,highlightColor按钮按下的颜色"),
              textColor: Color(0xffff0000),
              color: Color(0xff11f1f1),
              highlightColor: Color(0xff00ff00),
            ),
            RaisedButton(
              onPressed: null,
              child: Text("disabledTextColor禁用时文本颜色,disabledColor禁用时背景颜色"),
              disabledTextColor: Color(0xff999999),
              disabledColor: Color(0xffff0000),

            ),
            RaisedButton(
              onPressed: () {},
              child: Text("splashColor水波的颜色"),
              splashColor: Color(0xffff0000),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text("colorBrightness按钮主题高亮 Brightness.light"),
              colorBrightness: Brightness.light,
            ),
            RaisedButton(
              onPressed: () {},
              child: Text("colorBrightness按钮主题高亮 Brightness.dark"),
              colorBrightness: Brightness.dark,
            ),
            Container(
              margin: EdgeInsets.only(top: 20.0),
              child: RaisedButton(
                onPressed: () {},
                child: Text(
                        "elevation按钮下面的阴影,"
              ),
                elevation: 15.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 20.0),
              child: RaisedButton(
                onPressed: () {},
                child: Text(
                    "highlightElevation高亮时候的阴影"),
                highlightElevation: 5,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 20.0),
              child: RaisedButton(
                onPressed: () {},
                child: Text(
                    "disabledElevation按下的时候的阴影"),
                disabledElevation: 50.0,
              ),
            ),
            RaisedButton(
              onPressed: () {
                print("RaisedButton== onPressed");
              },
              child: Text(
                  "onHighlightChanged 水波纹高亮变化回调,按下返回true,抬起返回false"),
              onHighlightChanged: (bool b) {
                print("RaisedButton== $b");
              },
            ),
            RaisedButton(
              onPressed: () {
                print("点击了");
              },
              child: Text("onPressed点击事件"),
            ),
            RaisedButton(
              onPressed: () {
              },
              child: Text("配置点击目标的最小尺寸"),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            RaisedButton(
              onPressed: () {
              },
              child: Text("定义形状和高程的动画更改的持续时间"),
              animationDuration: Duration(hours: 1),
            ),
            RaisedButton(
              onPressed: () {},
              textColor: Colors.white,
              padding: const EdgeInsets.all(0.0),
              child: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: <Color>[Colors.red, Colors.green, Colors.blue],
                  ),
                ),
                padding: const EdgeInsets.all(10.0),
                child: Text('Gradient Button'),
              ),
            ),
          ],

        ),
      ),
    );
  }
}