Flutter中如何实现带有变化图标的浮动操作按钮

发布于06月14日

我是新的Flutter 翼，我在一个项目上工作，在应用程序中，我想有一个浮动的行动按钮，动态改变其图标基于某种条件.

例如，当状态为TRUE时，它应该显示✔️图标，当状态为FALSE时，它应该显示❌图标.

我试过FloatingActionButton小工具，但它似乎只支持静态图标.

如何实现浮动操作按钮的这种动态图标行为？

如果有任何指导或代码样本帮助我实现此功能，我将不胜感激！

这是我到目前为止的进展:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool? isConditionTrue; 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Action Button Demo'),
      ),
      body: Center(
        child: Text(
          'Your App Content',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            isConditionTrue = !isConditionTrue;
          });
        },
        child: Icon(
          isConditionTrue ? Icons.check : Icons.add,
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { List<IconData> icons = [ Icons.done, Icons.cancel, Icons.turn_right_outlined, Icons.king_bed, Icons.alarm, Icons.one_k, ]; int activeIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Floating Action Button Demo'), ), body: const Center( child: Text( 'Your App Content', style: TextStyle(fontSize: 24.0), ), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { if (activeIndex < icons.length - 1) { activeIndex++; } else { activeIndex = 0; } }); }, child: Icon(icons[activeIndex]), ), ); } } void main() { runApp(const MaterialApp( home: MyHomePage(), )); }

Flutter中如何实现带有变化图标的浮动操作按钮

推荐答案

Flutter相关问答推荐

什么是dart ：这只是dart ？

使小部件处于有状态状态会导致hasSize异常

如何从RealmResults获取Flutter Flutter 流？

Flutter 数独网格

构建上下文不能跨异步间隙使用

使用 Flutter 和 Dio 将图像上传到 API

hooks_riverpod 有用途吗

网页浏览器不支持鼠标滚动的行项目

Flutter：如何从运行时创建的列表中访问单个子部件的值

如何解决需要一个标识符，但得到的是：.try 在：之前插入一个标识符.dart 错误

转换函数上传文件上传Uint8List

面对Flutter 中的行和列问题

Flutter/Dart - 从外部类更新状态

如何格式化网址？

如何在 flutter 中更改日期 Select 器 colored颜色？

如何在 ListView.builder 中扩展文本？

如何按键在 map 列表中搜索

Flutter 将方法应用于静态变量

带有 Dismissible 和 Provider (NotifyListener) 的笨拙动画

设计响应式卡片的最佳方法，以避免像素溢出错误或 _AssertionError