9.Flutter(Widget)-按钮组件

截屏2022-07-26 10.22.32.png
截屏2022-07-26 10.24.49.png

import 'package:flutter/material.dart';
class ZFLButtonPage extends StatefulWidget {
  @override
  _ZFLButtonPageState createState() => _ZFLButtonPageState();
}

class _ZFLButtonPageState extends State<ZFLButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('按钮演示'), actions: [
        IconButton(icon: Icon(Icons.settings), onPressed: () {}),
        IconButton(
            icon: Image.network(
                'https://img1.baidu.com/it/u=3578666848,2907096614&fm=253&fmt=auto&app=138&f=PNG?w=160&h=160'),
            onPressed: () {})
      ]),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
//            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                  flex: 1,
                  child: RaisedButton(
                      child: Text('RaisedButton普通按钮'),
                      color: Colors.blue,
                      //背景颜色
                      textColor: Colors.white,
                      //文字颜色
                      elevation: 2,
                      //按钮默认有阴影
                      onPressed: () {})),
              Expanded(
                flex: 2,
                child: RaisedButton.icon(
                    icon: Icon(Icons.settings),
                    label: Text('RaisedButton普通按钮'),
                    color: Colors.blue,
                    //背景颜色
                    textColor: Colors.white,
                    //文字颜色
                    elevation: 2,
                    //按钮默认有阴影
                    onPressed: () {}),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                  flex: 1,
                  child: RaisedButton(
                      child: Text('RaisedButton普通按钮'),
                      color: Colors.blue,
                      //背景颜色
                      textColor: Colors.white,
                      //文字颜色
                      elevation: 2,
                      //按钮默认有阴影
                      onPressed: () {})),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 50,
                child: RaisedButton(
                  child: Text('RaisedButton普通按钮'),
                  color: Colors.green,
                  //背景颜色
                  textColor: Colors.white,
                  //文字颜色
                  elevation: 2,
                  //按钮默认有阴影
                  onPressed: () {},
                ),
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 50,
                child: RaisedButton(
                  child: Text('RaisedButton普通按钮圆角'),
                  color: Colors.green,
                  //背景颜色
                  textColor: Colors.white,
                  //文字颜色
                  elevation: 2,
                  //按钮默认有阴影
                  onPressed: () {},
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25)),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 50,
                child: RaisedButton(
                  child: Text('RaisedButton普通按钮圆形'),
                  color: Colors.green,
                  //背景颜色
                  textColor: Colors.white,
                  //文字颜色
                  elevation: 2,
                  //按钮默认有阴影
                  onPressed: () {},
                  shape: CircleBorder(
//                   side: BorderSide(color: Colors.white)
                      ),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 50,
                child: FlatButton(
                  child: Text('FlatButton普通按钮圆形'),
                  color: Colors.green,
                  //背景颜色
                  textColor: Colors.white,

                  //按钮默认有阴影
                  onPressed: () {},
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5)),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlineButton(
                child: Text('按钮'),
                borderSide: BorderSide(width: 1,color: Colors.blue),
//                disabledBorderColor: Colors.yellow,
                highlightedBorderColor: Colors.red,
                highlightColor: Colors.white,
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5)),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ButtonBar(
                children: [
                  RaisedButton(
                    shape: CircleBorder(
                    ),
                    child: Text('注册'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 2,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                  RaisedButton(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                    child: Text('登录'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 2,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                ],
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(''),
              MyButton(
                text: '我是按钮',
                pressed: (){
                  print('我被点击了');
                },
                width: 100.0,
                height: 50.0,
              )
            ],
          )

        ],
      ),
    );
  }

}

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton({this.text,this.pressed,this.width,this.height});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed:this.pressed,
      ),
    );
  }
}

截屏2022-07-26 10.08.25.png
截屏2022-07-26 10.07.16.png

import 'package:flutter/material.dart';
import 'package:flutter_app/buttons/zfl_button_page.dart';
import 'package:flutter_app/dialog_toast/dialog_page.dart';
import 'package:flutter_app/layout/wrap/zfl_wrap_widget.dart';
class ZFLFloatTabbarButtonPage extends StatefulWidget {
  @override
  _ZFLFloatTabbarButtonPageState createState() =>
      _ZFLFloatTabbarButtonPageState();
}

class _ZFLFloatTabbarButtonPageState extends State<ZFLFloatTabbarButtonPage> {
  int _currentIndex = 0;

  List _pageList=[
    DialogPage(),
    ZFLButtonPage(),
    ZFLWrapWidget(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Container(
//        height: 80,
//        width: 80,
        height: 60,
        width: 60,
        padding: EdgeInsets.all(2),
//        margin: EdgeInsets.only(top: 20),
        margin: EdgeInsets.only(top: 0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.white
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            setState(() {
              this._currentIndex = 1;
            });
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.cake_outlined),title: Text('分类')),
          BottomNavigationBarItem(icon: Icon(Icons.maps_ugc),title: Text('设置')),
        ],
      ),
    );
  }
}