Flutter RaisedButton控制元件介紹

一、常用屬性

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,//設定子控制元件
    })
複製程式碼

二、一個完整的例子

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'),
              ),
            ),
          ],

        ),
      ),
    );
  }
}



複製程式碼