按钮组件和自定义按钮

 

 

 

 

import 'package:flutter/material.dart';

class ButtonPage extends StatelessWidget {

  const ButtonPage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("按钮演示页面"),

      ),

      body: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              RaisedButton(

                child: Text('普通按钮'),

                onPressed: () {

                  print('普通按钮');

                },

              ),

              SizedBox(

                width: 5,

              ),

              RaisedButton(

                child: Text('有颜色的按钮'),

                color: Colors.blue,

                textColor: Colors.white,

                onPressed: () {

                  print('有颜色的按钮');

                },

              ),

              SizedBox(

                width: 5,

              ),

              RaisedButton(

                child: Text('有阴影的按钮'),

                color: Colors.blue,

                textColor: Colors.white,

                elevation: 10,

                onPressed: () {

                  print('有颜色的按钮');

                },

              ),

            ],

          ),

          SizedBox(

            height: 10,

          ),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Container(

                child: RaisedButton.icon(

                  icon: Icon(Icons.search),

                  label: Text('图标按钮'),

                  color: Colors.blue,

                  textColor: Colors.white,

                  onPressed: () {

                    print('图标按钮');

                  },

                ),

              )

            ],

          ),

          SizedBox(

            height: 10,

          ),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              RaisedButton.icon(

                icon: Icon(Icons.search),

                label: Text('圆角按钮'),

                color: Colors.blue,

                textColor: Colors.white,

                elevation: 20,

                // 圆角

                shape: RoundedRectangleBorder(

                  borderRadius: BorderRadius.circular(10),

                ),

                onPressed: () {

                  print('圆角按钮');

                },

              ),

              SizedBox(

                width: 10,

              ),

              RaisedButton.icon(

                icon: Icon(Icons.search),

                label: Text('圆角按钮'),

                color: Colors.blue,

                textColor: Colors.white,

                elevation: 20,

                splashColor: Colors.grey, // 水波纹

                // 圆角

                shape: CircleBorder(

                  side: BorderSide(color: Colors.white),

                ),

                onPressed: () {

                  print('圆角按钮');

                },

              ),

              FlatButton(

                child: Text('按钮'),

                color: Colors.blue,

                textColor: Colors.white,

                splashColor: Colors.grey, // 水波纹

                // 圆角

                shape: CircleBorder(

                  side: BorderSide(color: Colors.white),

                ),

                onPressed: () {

                  print('按钮');

                },

              ),

            ],

          ),

          SizedBox(

            height: 10,

          ),

          Row(

            children: [

              OutlinedButton(

                child: Text('按钮'),

                onPressed: () {

                  print('按钮');

                },

              ),

              MyButton(

                text: "自定义按钮",

                height: 60,

                width: 150,

                pressed: () {

                  print('自定义按钮');

                },

              ),

            ],

          ),

          SizedBox(

            height: 10,

          ),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Container(

                height: 50,

                width: 150,

                child: RaisedButton(

                  child: Text('宽度和高度'),

                  color: Colors.blue,

                  textColor: Colors.white,

                  elevation: 10,

                  onPressed: () {

                    print('有颜色的按钮');

                  },

                ),

              )

            ],

          ),

          SizedBox(

            height: 10,

          ),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Expanded(

                  child: Container(

                height: 60,

                margin: EdgeInsets.all(10),

                child: RaisedButton(

                  child: Text('自适应按钮'),

                  color: Colors.blue,

                  textColor: Colors.white,

                  elevation: 10,

                  onPressed: () {

                    print('有颜色的按钮');

                  },

                ),

              )),

            ],

          ),

        ],

      ),

    );

  }

}

//自定义按钮组件

class MyButton extends StatelessWidget {

  final text;

  final pressed;

  final double width;

  final double height;

  const MyButton(

      {this.text = '', this.pressed, this.width = 80.0, this.height = 30.0});

  @override

  Widget build(BuildContext context) {

    return Container(

      height: this.height,

      width: this.width,

      child: ElevatedButton(

        child: Text(this.text),

        onPressed: this.pressed,

      ),

    );

  }

}