Flutter 按钮组件 底部导航 浮动按钮 Swiper 自

一、Flutter 中的按钮组件介绍

• Flutter 里常见的按钮组件有：
  RaisedButton、FlatButton、
  IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。
• RaisedButton ：凸起的按钮，
• ElevatedButton：凸起的按钮，
• FlatButton ：扁平化的按钮
• OutlineButton：线框按钮
• IconButton ：图标按钮
• ButtonBar:按钮组
• FloatingActionButton: 浮动按钮

二、Flutter 按钮组件中的一些属性

• onPressed:(){}

onPressed 按下按钮时触发的回调，接收一个
方法，传 null 表示按钮禁用，会显示禁用相关样式
child:

• textColor: 文本颜色
• color: 按钮的颜色
• disabledColor: 按钮禁用时的颜色
• disabledTextColor: 按钮禁用时的文本颜色
• splashColor: 点击按钮时水波纹的颜色
• highlightColor: 点击（长按）按钮后按钮的颜色
• elevation: double 阴影的范围，值越大阴影范围越大
• padding: 内边距
• shape: 设置按钮的形状

shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
 )

shape: CircleBorder(
    side: BorderSide(
      color: Colors.white,
   )
)

样式图

下面只举几个例子
实际开发中我们遇到的

• 1. 自适应按钮
• 2. 圆角按钮
• 3. 带阴影按钮
• 4. 带icon按钮

// 1.自适应按钮
          Row(
            children: [
              Expanded(
                  child: Container(
                margin: EdgeInsets.all(10),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text("自适应按钮"),
                ),
              ))
            ],
          ),

// 2.圆角按钮
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 40,
                width: 80,
                child: RaisedButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {},
                  child: Text("圆角"),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),

// 3.带阴影
              RaisedButton(
                onPressed: () {},
                child: Text("带阴影"),
                elevation: 20,
              ),

// 4.带图标
              RaisedButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.search),
                  label: Text("带图标"))

// 5.背景颜色
              RaisedButton(
                onPressed: () {},
                color: Colors.blue,
                textColor: Colors.white,
                child: Text("背景按钮"),
              ),

// 6.修改 ElevatedButton样式使用 style: ElevatedButton.styleFrom
                ElevatedButton(
                  onPressed: () {},
                  child: Text("Elevate样式"),
                  style: ElevatedButton.styleFrom(
                      primary: Colors.red, // 按钮背景颜色
                      elevation: 20,
                      textStyle: TextStyle(color: Colors.blue, fontSize: 15)),
                ),

如何实现咸鱼凸起按钮

image.png

总的思想是FloatingActionButton去覆盖中间的BottomNavigationBarItem。因为BottomNavigationBarItem不能去掉icon属性，所以只能覆盖。

      floatingActionButton: Container(
        height: 80,
        width: 80,
        margin: EdgeInsets.only(top: 20),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.white,
        ),
        child: FloatingActionButton(
          elevation: 10,
          onPressed: () {
            setState(() {
              this._index = 1;
            });
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: this._index,
        onTap: (index) {
          setState(() {
            this._index = index;
          });
        },
        type: BottomNavigationBarType.fixed, // 配置多个底部按钮
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home_filled), title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(Icons.arrow_left), title: Text("")),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("我的"))
        ],
      ),

Scaffold(
      ...
      resizeToAvoidBottomInset: false, // 防止FloatingActionButton被顶起
      ...
)

三、Flutter中的各种Dialog

dialog.gif

AlertDialog

_showAlartDialog() async {
  var result = await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return AlertDialog(
          title: Text("提示"),
          content: Text("确定删除"),
          actions: [
            OutlinedButton(
                onPressed: () {
                  Navigator.pop(context, "cancle");},
                child: Text("取消")),
            ElevatedButton(
                onPressed: () {
                  Navigator.pop(context, "sure");},
                child: Text("确定")),
          ],
        );
      });
  print("===========$result");
}

SimpleDialog

_simpleDiaglog() async {
  var simpleRel = await showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text("select 单选按钮框"),
          children: <Widget>[
            SimpleDialogOption(
              child: Text("Option A"),
              onPressed: () {
                Navigator.pop(context, 'Option A');},
            ),
          ],
        );
      });
}

showModalBottomSheet

_showbottomDialog() async {
  var actionSheet = await showModalBottomSheet(
      context: context,
      builder: (builder) {
        return Container(
          height: 200,
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("分享 A"),
                onTap: () {
                  Navigator.pop(context, 'A');},
              ),
            ],
          ),
        );
      });
}

自定义Dialog

// 1. 创建Dialog里面的内容  创建自定义类WindowDialog
import 'dart:async';
import 'package:flutter/material.dart';

class WindowDialog extends StatefulWidget {
  const WindowDialog({Key? key}) : super(key: key);

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

class _WindowDialogState extends State<WindowDialog> {
  _showTimeDialog(context) {
    Timer.periodic(Duration(milliseconds: 1500), (timer) {
      Navigator.pop(context);
      timer.cancel();
    });
  }

  @override
  Widget build(BuildContext context) {
    _showTimeDialog(context);
    return Material( // 这里需要注意
        type: MaterialType.transparency,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                alignment: Alignment.center,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: AspectRatio(
                  aspectRatio: 3 / 2,
                  child: Stack(
                    children: [
                      Align(
                        child: Text("头部"),
                        alignment: Alignment(0, -1),
                      ),
                      Align(
                        child: IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: Icon(
                            Icons.close_sharp,
                            color: Colors.black26,
                            size: 24,
                          ),
                        ),
                        alignment: Alignment(1, -1),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}

这里自定义的dialog的样式必须是Material否则不会生效。

// 2.引用
showDialog(
  context: context,
  builder: (context) {
  return WindowDialog();
});

dialog 小技巧 设置barrierDismissible: false,为外部点击无效
自定义Material(中的type: MaterialType.transparency设置背景半透明；
Navigator.pop(context, "result"); 后面的result可以通过async aweit 同步获取。

Toast

fluttertoast: ^8.0.8

Fluttertoast.showToast(
   msg: "This is Center Short Toast",
   toastLength: Toast.LENGTH_SHORT,
   gravity: ToastGravity.CENTER,
   timeInSecForIosWeb: 1,
   backgroundColor: Colors.red,
   textColor: Colors.white,
   fontSize: 16.0);

四、Swiper

swiper.gif

flutter_swiper: ^1.1.6

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class Mine extends StatelessWidget {
  Mine({Key? key}) : super(key: key);

  List imageList = [
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg",
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
        children: [
          AspectRatio(
            aspectRatio: 2 / 1,
            child: new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new Image.network(
                  imageList[index],
                  fit: BoxFit.cover,
                );
              },
              itemCount: imageList.length,
              loop: true,
              autoplay: true,
              onTap: (index) {
                print("=-=-=-=-$index=-");
              },
              duration: 500,
              // scrollDirection: Axis.vertical,
              pagination: new SwiperPagination(
                  alignment: Alignment.bottomCenter,
                  margin: EdgeInsets.only(top: 10),
                  builder: SwiperPagination.dots),
              // pagination: new SwiperCustomPagination(
              //     builder: (BuildContext context, SwiperPluginConfig config) {
              //       return config.;
              //     }
              // ),
              // control: new SwiperControl(),
            ),
          ),
        ],
      )),
    );
  }
}

Demo地址