Flutter 04 按钮Button和事件处理、弹框Dialog、Toast

最新推荐文章于 2024-03-30 05:37:29 发布
最新推荐文章于 2024-03-30 05:37:29 发布
阅读量830 收藏 1
点赞数 1
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sziitjin/article/details/134159726
版权

一、按钮组件

1、按钮类型：

2、按钮实现效果：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const LayoutDemo(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  print("ElevatedButton....");
                },
                child: const Text("普通按钮")),
            TextButton(onPressed: () {}, child: const Text("文本按钮")),
            OutlinedButton(onPressed: () {}, child: const Text("边框按钮")),
            IconButton(onPressed: () {}, icon: const Icon(Icons.thumb_up))
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
          ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("发送")),
          TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.info),
              label: const Text("消息")),
          OutlinedButton.icon(
              onPressed: null,
              icon: const Icon(Icons.add),
              label: const Text("增加"))
        ]),
        const SizedBox(
          height: 20,
        ),
        Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
          ElevatedButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
                  foregroundColor:
                  MaterialStateProperty.all(Colors.white) //文字图标颜色
              ),
              onPressed: () {
                print("ElevatedButton");
              },
              child: const Text("普通按钮")),
        ]),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
              height: 60,
              width: 140,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text("大按钮"),
              ),
            ),
            SizedBox(
              height: 40,
              width: 100,
              child: ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.search),
                label: const Text("搜索"),
              ),
            )
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  margin: const EdgeInsets.all(20),
                  height: 50,
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(
                            const Color.fromARGB(220, 245, 71, 71)),
                        foregroundColor:
                        MaterialStateProperty.all(Colors.white)),
                    child: const Text("登录"),
                  ),
                ))
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(//圆角
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12)))),
                onPressed: () {},
                child: const Text("圆角")),
            SizedBox(
              height: 80,
              width: 80,
              child: ElevatedButton(
                  style: ButtonStyle(
                      shape: MaterialStateProperty.all(//圆形
                          const CircleBorder(
                              side:
                              BorderSide(width: 2, color: Colors.yellow)))),
                  onPressed: () {},
                  child: const Text("圆形")),
            ),
          ],
        ),
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
                style: ButtonStyle(side: MaterialStateProperty.all(//修改边框颜色
                    const BorderSide(width: 1, color: Colors.red))),
                onPressed: () {},
                child: const Text("带边框的按钮"))
          ],
        )
      ],
    );
  }
}

二、事件处理

1、在Flutter中，手势有两个不同的层次：

第一层：原始指针事件(Pointer Events)：描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。

第二层：手势识别（Gesture Detector)：这个是在原始事件上的一种封装。

2、指针事件Pointer：

demo：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: MyHomePage(),
      ),
    );
  }
}

//事件基本应用，指针事件（Touch）
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Listener(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
          // child:  ElevatedButton(
          //     onPressed: () {
          //       print("ElevatedButton....");
          //     },
          //     child: const Text("普通按钮")),
        ),
        onPointerDown: (event) => print("手指按下，当前位置,全局：${event.position}|控件内：${event.localPosition}"),
        onPointerMove: (event) => print("手指移动:$event"),
        onPointerUp: (event) => print("手指抬起:$event"),
      ),
    );
  }
}

3、手势识别（Gesture Detector)：

1）GestureDetector封装了点击、双击、滑动等大量功能，使开发者可以快速使用这些基础性功能：
GestureDetector({
    super.key,
    this.child,
    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,
    this.onDoubleTap,
    this.onDoubleTapCancel,
    this.onLongPressDown,
    this.onLongPressCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,
    this.behavior,
    this.excludeFromSemantics = false,
    this.dragStartBehavior = DragStartBehavior.start,
  })
2）Gesture种类非常多：

3）事件拦截应用：

可以通过Stack布局来解决手势冲突，避免嵌套。

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  _onPointerDown(PointerDownEvent event) {
    if (kDebugMode) {
      print("_onPointerDown：$event");
    }
  }

  _onPointerMove(PointerMoveEvent event) {
    if (kDebugMode) {
      print("_onPointerMove：$event");
    }
  }

  _onPointerUp(PointerUpEvent event) {
    if (kDebugMode) {
      print("_onPointerUp：$event");
    }
  }

  _onPointerEnter(PointerEnterEvent event) {
    if (kDebugMode) {
      print("_onPointerEnter：$event");
    }
  }

  _onPointerExit(PointerCancelEvent event) {
    if (kDebugMode) {
      print("_onPointerExit：$event");
    }
  }

  _onPointerHover(PointerHoverEvent event) {
    if (kDebugMode) {
      print("_onPointerHover：$event");
    }
  }

  _onPointerDown1(PointerDownEvent event) {
    if (kDebugMode) {
      print("_onPointerDown1：$event");
    }
  }

  _onPointerMove1(PointerMoveEvent event) {
    if (kDebugMode) {
      print("_onPointerMove1：$event");
    }
  }

  _onPointerUp1(PointerUpEvent event) {
    if (kDebugMode) {
      print("_onPointerUp1：$event");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
        onPointerDown: _onPointerDown,
        onPointerMove: _onPointerMove,
        onPointerUp: _onPointerUp,
        onPointerCancel: _onPointerExit,
        onPointerHover: _onPointerHover,
        child: Stack(
          children: <Widget>[
            GestureDetector(
              //监听点击事件
              onTap: () => {
                print("点击事件")
              },
              //监听横向滑动事件
              onVerticalDragUpdate: (DragUpdateDetails details) => {
                print("横向滑动：$details")
              },
              child: Listener(
                  onPointerDown: _onPointerDown1,
                  onPointerMove: _onPointerMove1,
                  onPointerUp: _onPointerUp1,
                  child: Center(
                    child: Container(
                      color: Colors.red,
                      width: 200.0,
                      height: 100.0,
                    ),
                  )),
            ),
          ],
        ));
  }
}

三、弹框组件Dialog

Dialog页面代码：

import 'package:flutter/material.dart';
import 'dialog/MyToast.dart';

import 'dialog/dialog.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const LayoutDemo(),
      ),
    );
  }
}



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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () async{
              var result = await alertDialog(context);
              print(result);
            },
            child: const Text('alert弹出框-AlertDialog '),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async{
              var result = modelBottomSheet(context);
              print("result：$result");
            },
            child: const Text('select弹出框-SimpleDialog'),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async{
              var result = await showDialog(
                  barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框 context: context,
                  builder: (context) {
                    return MyDialog(
                        title: '标题',
                        onClosed: () {
                          print("关闭");
                          Navigator.of(context).pop();
                        },
                        content: "我是一个内容");
                  }, context: context);
              print("result：$result");
            },
            child: const Text('自定义dialog'),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async{
              var result = await simpleDialog(context);
              print("result:$result");
            },
            child: const Text('ActionSheet底部弹出框'),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: (){
              // Fluttertoast.showToast(
              //     msg: "提示信息",
              //
              //     toastLength: Toast.LENGTH_LONG,   //值针对 android 平台
              //     timeInSecForIosWeb: 1,  //提示时间 针对ios 和 web
              //     backgroundColor: Colors.black26, //背景颜色
              //     textColor: Colors.white,   //文本颜色
              //     fontSize: 16.0  //文本字体大小
              // );
              Toast.showInfo("message", context: context, duration: 2000);
            },
            child: const Text('Toast'),
          ),
          // fluttertoast
        ],
      ),
    );
  }
}

1、AlertDialog：

最简单的方案是利用AlertDialog组件构建一个弹框

import 'package:flutter/material.dart';

Object alertDialog(BuildContext context) async {
  var result = await showDialog(
      barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("提示信息!"),
          content: const Text("您确定要删除吗"),
          actions: [
            TextButton(
                onPressed: () {
                  print("ok");
                  Navigator.of(context).pop("ok"); //点击按钮让AlertDialog消失
                },
                child: const Text("确定")),
            TextButton(
                onPressed: () {
                  print("cancel");
                  Navigator.of(context).pop("取消");
                },
                child: const Text("取消"))
          ],
        );
      });

  return result;
}

 2、SimpleDialog：

通过SimpleDialog构建一个选择框

import 'package:flutter/material.dart';

Object simpleDialog(BuildContext context) async {
  var result = await showDialog(
      barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text("请选择语言"),
          children: [
            SimpleDialogOption(
              onPressed: () {
                print("汉语");
                Navigator.pop(context, "汉语");
              },
              child: const Text("汉语"),
            ),
            const Divider(),
            SimpleDialogOption(
              onPressed: () {
                print("英语");
                Navigator.pop(context, "英语");
              },
              child: const Text("英语"),
            ),
            const Divider(),
            SimpleDialogOption(
              onPressed: () {
                print("日语");
                Navigator.pop(context, "日语");
              },
              child: const Text("日语"),
            ),
            const Divider(),
          ],
        );
      });

 return result;
}

3、showModalBottomSheet：

通过showModalBottomSheet构建一个底部弹框

 

import 'package:flutter/material.dart';


Object modelBottomSheet(BuildContext context) {
  return showModalBottomSheet(
      context: context,
      builder: (context) {
        return SizedBox(
          height: 240,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ListTile(
                title: const Text("分享"),
                onTap: () {
                  print("分享");
                  Navigator.of(context).pop("分享");
                },
              ),
              const Divider(),
              ListTile(
                title: const Text("收藏"),
                onTap: () {
                  print("收藏");
                  Navigator.of(context).pop("收藏");
                },
              ),
              const Divider(),
              ListTile(
                title: const Text("取消"),
                onTap: () {
                  print("取消");
                  Navigator.of(context).pop("取消");
                },
              ),
              const Divider(),
            ],
          ),
        );
      });
}

4、自定义Flutter Dialog：

import 'package:flutter/material.dart';


// 自定义dialog
class MyDialog extends Dialog {
  String title;
  String content;
  Function()? onClosed;

  MyDialog({Key? key, required this.title,required
  this.onClosed,this.content=""}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(10),


                  child: Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.center,
                        child: Text(title),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          onTap: onClosed,
                          child: const Icon(Icons.close),
                        ),
                      )
                    ],
                  ),
                ),
                const Divider(),
                Container(
                  padding: const EdgeInsets.all(10),
                  width: double.infinity,
                  child: Text(content,textAlign: TextAlign.left),
                )
              ],
            ),

          )),
    );
  }
}

四、Toast

所谓toast框其实就是在图层的最上面一层插入一个显示图层，在Flutter中利用OverLayEntry构建图层，然后通过Overlay进行插入。

1、自定义Toast：

import 'package:flutter/material.dart';

class Toast {
  static var _lastMsg;

  static int _lastShowms = 0;


  static Future _show(BuildContext context, String msg, int duration) {
    OverlayEntry entry = OverlayEntry(
        builder: (BuildContext context) => Positioned(
              //top值，可以改变这个值来改变toast在屏幕中的位置
              top: MediaQuery.of(context).size.height.toDouble() * 0.5,
              child: Container(
                  alignment: Alignment.center,
                  width: MediaQuery.of(context).size.width,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                    child: _buildToastWidget(context, msg),
                  )),
            )
    );

    ///往Overlay中插入插入OverlayEntry
    Overlay.of(context)?.insert(entry);

    ///两秒后，移除Toast
    Future result = Future.delayed(Duration(milliseconds: duration)).then((value) {
      entry.remove();
    });
    return result;
  }

  //toast UI绘制
  static _buildToastWidget(context, String msg) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.0),
              shape: BoxShape.rectangle,
              color: Colors.black45,
            ),
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Text(
                  msg,
                  style: const TextStyle(
                      color: Colors.white,
                      decoration: TextDecoration.none,
                      fontSize: 14)
              ),
            )
        )
      ],
    );
  }

  //处理重复多次点击
  static void _handleDuplicateAndShow(
      String message, BuildContext context, int duration) {
    if (_lastMsg == message) {
      //相同信息内容
      int currentms = DateTime.now().millisecondsSinceEpoch;
      int interval = currentms - _lastShowms;
      if (interval > duration) {
        //大于时间间隔 可以显示
        _show(context, message, duration);
        _lastShowms = currentms;
      }
    } else {
      _show(context, message, duration);
      _lastMsg = message;
    }
  }

  /// 提示
  static void showInfo(String message, {required BuildContext context, int duration = 2000}) {
    _handleDuplicateAndShow(message, context, duration);
  }
}

2、使用第三方框架（fluttertoast）：

sziitjin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter Button 按钮.dart
10-05
在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。 RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button FlatButton：扁平化的按钮 OutlineButton：线框按钮 IconButton：图标按钮 ButtonBar：按钮组 FloatingActionButton：浮动按钮 DropdownButton：下拉框按钮
Flutter Switch 开关控制
10-21
Flutter Switch 开关控制
Flutter开发之——基本组件-Button，Android开发从零开始
最新发布
2401_84002144的博客
03-30 702
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的。
Flutter组件--按钮(Button)组件
eastWind1101的博客
10-15 3838
按钮,button
Flutter封装自定义按钮（过渡色、水波纹）
qq_38774121的博客
05-09 368
封装自定义过渡按钮、分装flutter按钮
Flutter-UI-Button大全
weixin_38716347的博客
08-21 764
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 RawMaterialButton 原始按键 原始的Material按键，按键界的幕后大佬。可接受点击，长按，高亮变化事件，可指定颜色，形状。影深，内边距等属性。 属性 注释 highlightElevation 高亮影深【double】 shape 形状【
Flutter TextButton 详细使用配置、Flutter ButtonStyle样式概述实践
热门推荐
代码小疯子
11-07 3万+
优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力
[Flutter]TextButton自定义样式
Gamin
02-29 928
/ 按钮点击事件},backgroundColor: MaterialStateProperty.all(Colors.blue), // 设置背景颜色padding: MaterialStateProperty.all(EdgeInsets.zero), // 设置内边距为零borderRadius: BorderRadius.circular(10.0), // 设置圆角半径),),
flutter 文本按钮 TextButton
Leove的专栏
07-02 2642
一般使用形式 TextButton( onPressed: _onPressed, child: Text("press"), style: ButtonStyle( side: MaterialStateProperty.all( BorderSide(width: 3, color: Colors.lightB
Flutter 按钮介绍 CupertinoButton、TextButton、ElevatedButton、OutlinedButton、IconButton
xhuww的博客
07-06 3968
本文介绍Flutter中的按钮 CupertinoButton、TextButton、ElevatedButton、OutlinedButton、IconButton等控件的使用，以及自定义响应点击事件。
Flutter常用button组件及自定义按钮组件
weixin_46136019的博客
03-23 3320
final text;@override} }这里，我们自定义的按钮组件就完成了。因为flutter更新也比较快，废弃的组件也比较多，如果特别喜欢使用用某种已废弃组件，那么可以通过这种方式来创建它。
bot_toast:一个非常好用的Flutter Toast库
05-05
BotToast :robot: 一个非常好用的flutter吐司库！语言：英语| :panda: 3.0版本 :page_with_curl: 文献资料 :dragon_face: 概述在真正意义上的Toast上，您可以在任何需要的时候调用它，而没有任何限制！ 功能丰富，...
Flutter任意拖动的悬浮按钮
06-17
Flutter任意拖动的悬浮按钮，可以更改参数设定边界范围， 内包含多个Demo 仓库地址 https://github.com/ihongka/FlutterDIY
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
主要介绍了Flutter之自定义Dialog实现版本更新弹窗功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter材质按钮，可在进度和错误状态之间进行动画处理-JavaScript开发
05-26
progress_button支持进度和错误视觉效果的Material Flutter按钮。Getting Started ProgressButton设计为易于使用和可自定义。 无需赘述，您可以看到一个演示和progress_button一个支持进度和错误视觉效果的Material ...
Flutter - 按钮
c_liufeng的博客
12-09 1979
普通按钮 TextButton - 文本按钮 OutlineButton - 空心按钮 ElevatedButton - 凸起按钮 按钮属性 属性 类型 说明 onPressed Function 点击事件 onLongPress Function 长按事件 child Widget 子组件 style ButtonStyle 自定义样式 ButtonStyle 属性 属性 类型 说明 textStyle MaterialStateProperty 字体样
Flutter TextButton相关
劉光軍_Shine的博客
03-20 1771
flutter 2.0版本新增了三个按钮 TextButton、OutlinedButton、ElevatedButton 以TextButton为例： 属性： const TextButton({ Key? key, required VoidCallback? onPressed, VoidCallback? onLongPress, ButtonStyle...
【Flutter入门到进阶】Flutter基础篇---按钮、弹框、页面跳转
Yvan
03-02 1932
示例// 自定义dialogFunction()?onClosed;key,@overridePadding(Align(),Align(),],),),Container(],),)),说明所谓toast框其实就是在图层的最上面一层插入一个显示图层，在Flutter中利用OverLayEntry构建图层，然后通过Overlay进行插入示例//top值，可以改变这个值来改变toast在屏幕中的位置)),));
Flutter 基础 widgets - Button
it_lanmei的博客
12-28 410
（2）ElevatedButton.icon() 创建一个带图标的凸起按钮。（2）TextButton.icon() 创建一个带图标的文本按钮。onPressed：void Function()，必填，点击事件。（1）ElevatedButton() 创建普通的凸起按钮。（1）TextButton() 创建普通的文本按钮。style: ButtonStyle，按钮样式。child：Widget，必填，按钮内容。中等强调的按钮，重要程度仅次于主按钮。
flutter 如何获取电视遥控器按钮的事件和监听
03-25
Flutter 支持通过 RawKeyEvent 和 RawKeyboard 事件来获取电视遥控器按钮的事件和监听。通过监听 RawKeyEvent，您可以捕获所有原始键盘事件，包括向上、向下、向左、向右、确定、返回等键盘事件。例如，您可以在监听到确定键按下时，执行特定的操作。 下面是代码示例： ```dart class MyWidget extends StatefulWidget { @override MyWidgetState createState() => MyWidgetState(); } class MyWidgetState extends State<MyWidget> { final FocusNode _focusNode = FocusNode(); @override void dispose() { _focusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Focus( focusNode: _focusNode, child: RawKeyboardListener( focusNode: _focusNode, onKey: (RawKeyEvent event) { if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.select) { // 执行某个操作 } }, child: Container(), ), ); } } ``` 在上面的示例中，我们将 RawKeyboardListener 添加到组件树中，然后为其添加一个 onKey 回调函数来监听 RawKeyEvent 事件。如果用户按下了确定键，我们可以执行特定的操作，如打开一个新视图、播放视频等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sziitjin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值