Question

因此，我正在开发我的第一个Flutter应用程序（仅在现阶段是Android），但我需要了解如何更改floatActionButton上的图标。

现在，我了解到我需要以某种方式使label为变量，然后更新该变量以更改图标-但我不知道如何。

 floatingActionButton: FloatingActionButton.extended(
          onPressed: () => { Label: Text('Pause') // This does not work  )},
          label: Text('Play'),
          icon: Icon(Icons.play_circle_outline),
          backgroundColor: Colors.pink,
        ),

也尝试过

 floatingActionButton: FloatingActionButton.extended(
          onPressed: () => {c = true},
          if(!c){
            label: Text('Play'),
          }else
          {
            label: Text('Pause'),
          }
          icon: Icon(Icons.play_circle_outline),
          backgroundColor: Colors.pink,
        ),

完整代码

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

import 'package:audio_stream_player/audio_stream_player.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool check = true;
  String url = "http://18193.live.streamtheworld.com/SAM12AAC066_SC";
  AudioStreamPlayer player = AudioStreamPlayer();
  @override
  void initState() {
    super.initState();
    player.play(url);

  }

  Future<void> audioStart() async {
    // await FlutterRadio.audioStart();
    print('Audio Start OK');
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('DRN1'),
        ),
        body: new Center(
          child: Column(
            children: <Widget>[
              FlatButton(
                child: Icon(Icons.play_circle_filled),
                onPressed: () => player.play(url),
              ),
              FlatButton(
                child: Icon(Icons.play_circle_filled),
                onPressed: () => player.stop(),
              )
            ],

          ),

        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: (){
            setState(() {
              if(check){
                check = false;
              }else{
                check= true;
              }
            });
          },
          icon: Icon(check? Icons.play_arrow : Icons.pause),
          backgroundColor: Colors.pink,
        ),

      ),
    );
  }
}

Answer 1

为此，您可以使用简单变量，然后单击以更改该变量的值并将其放入setState。以下代码可以帮助您更清楚地理解。

将此代码放在您的StatefulWidget中。

bool check = true;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: (){
        setState(() {
          if(check){
            check = false;
          }else{
            check= true;
          }
        });
      },
      child: Icon(check? Icons.play_arrow : Icons.pause),
    ),
  );
}

Answer 2

bool check = true;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
    ),
    floatingActionButton: check?play():pause();
}

Widget play(){
  return FloatingActionButton(
      onPressed: (){
        setState(() {
          //Also add logic to play
          check=!check;

        });
      },
      child: Icon(Icons.play_arrow),
    ),
  );
  }

Widget pause(){
  return FloatingActionButton(
      onPressed: (){
        setState(() {
          //Also add logic to pause
          check=!check;
        });
      },
      child: Icon(Icons.Icons.pause),
    ),
  );
  }

Answer 3

执行简单的if-else来更改check变量的值无济于事

最简单的原因是Flutter需要在更改检查值后立即重新渲染小部件因此，我们需要在setState（）中使用change值，该值也要负责渲染

按下Flutter Change Fab图标

3 个答案: