Flutter各类按钮组件

还记得我最开始啥都不知道的时候,写个按钮都不知道怎么去修改样式。。。你们有福利了,我把需要用到的一些常用按钮,给你们都写出来啦
老规矩,先看样式:
(一)效果图
在这里插入图片描述

(二)实现代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Buttonpage(),//入口函数
    );
  }
}

class Buttonpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
        actions: <Widget>[
          //图标按钮
          IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                print("图标按钮");
              }),
        ],
        centerTitle: true,
      ),
      //浮动按钮的位置
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add, color: Colors.black),
        backgroundColor: Colors.yellow,
        onPressed: () {
          print("浮动按钮");
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      body: Column(
        children: <Widget>[
          Padding(padding: EdgeInsets.only(top: 10)),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  width: 30,
                  height: 50,
                  //通过给container设置宽高,给按钮设置宽高
                  child: RaisedButton(
                      child: Text("宽高按钮"),
                      onPressed: () {
                        print("宽高按钮");
                      }),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          //文字按钮
          RaisedButton(
              child: Text("文字按钮"),
              color: Colors.blue,
              textColor: Colors.white,
              elevation: 10, //阴影范围,值越大,越浓
              onPressed: () {
                print("文字按钮");
              }),
          //图标按钮
          RaisedButton.icon(
              label: Text("图标按钮"),
              icon: Icon(Icons.search),
              color: Colors.blue,
              textColor: Colors.white,
              elevation: 10, //阴影范围,值越大,越浓
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10) //圆角
                  ),
              onPressed: () {
                print("图标按钮");
              }),
          //圆形按钮
          Container(
            width: 200,
            height: 100,
            child: RaisedButton(
                child: Text("圆形按钮"),
                color: Colors.blue,
                textColor: Colors.white,
                elevation: 10, //阴影范围,值越大,越浓
                splashColor: Colors.green,
                shape: CircleBorder(side: BorderSide(color: Colors.white)),
                onPressed: () {
                  print("圆形按钮");
                }),
          ),
          //扁平化按钮
          FlatButton(
              color: Colors.green,
              textColor: Colors.white,
              onPressed: () {
                print("扁平化按钮");
              },
              child: Text("扁平化按钮")),
          //线框按钮
          OutlineButton(
              textColor: Colors.blue,
              onPressed: () {
                print("线框按钮");
              },
              child: Text("线框按钮")),
          //按钮组
          Row(
            children: [
              ButtonBar(
                children: [
                  RaisedButton(
                      child: Text("按钮组"),
                      onPressed: () {
                        print("按钮组");
                      }),
                  RaisedButton(
                      child: Text("按钮组"),
                      onPressed: () {
                        print("按钮组");
                      }),
                  RaisedButton(
                      child: Text("按钮组"),
                      onPressed: () {
                        print("按钮组");
                      }),
                  MyButton(
                      //调用
                      text: "自定义按钮",
                      pressed: () {
                        print("自定义按钮");
                      })
                ],
              ),
            ],
          ),
          //按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                  width: 150,
                  height: 50,
                  child: Expanded(
                    child: RaisedButton(
                        child: Text("按钮"),
                        onPressed: () {
                          print("按钮");
                        }),
                  ))
            ],
          )
        ],
      ),
    );
  }
}

//自定义按钮组件
class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final double height;
  const MyButton(
      {this.text = '', this.pressed, this.height = 80, this.width = 50.0});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(child: Text(this.text), onPressed: this.pressed),
    );
  }
}

(三)总结
按钮要写事件,不然会有黄线(vscode)

猜你喜欢

转载自blog.csdn.net/weixin_45425105/article/details/111904851
今日推荐