Flutter 悬浮按钮

Flutter 中的悬浮按钮可以通过 `FloatingActionButton` Widget 来实现。以下是一个基本的示例：

FloatingActionButton(
  onPressed: () {
    // 点击按钮后执行的代码
  },
  child: Icon(Icons.add),
)

可以在 `onPressed` 回调函数中添加点击按钮后要执行的代码。`child` 属性定义了按钮的图标，可以使用 `Icon` Widget 来创建一个图标，例如上述示例中使用了一个加号图标。

你还可以将悬浮按钮放在 `Scaffold` Widget 的 `floatingActionButton` 属性中，以便它始终位于屏幕底部。以下是完整的示例：

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello, World!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 点击按钮后执行的代码
    },
    child: Icon(Icons.add),
  ),
)

相关问题

flutter 悬浮窗播放视频

Flutter悬浮窗可以用于播放视频，具体实现可以参考以下步骤：

1. 导入flutter_floating库，可以在pubspec.yaml文件中添加依赖并运行flutter packages get命令进行安装。

2. 创建一个悬浮窗，可以使用FloatingWidget类，并设置其位置、大小、背景颜色等属性。

3. 在悬浮窗中添加一个视频播放器，可以使用video_player库，并设置其视频源、控制器、尺寸等属性。

4. 在悬浮窗中添加一些交互功能，例如播放/暂停按钮、进度条、全屏按钮等。

5. 将悬浮窗添加到屏幕上，并设置其显示/隐藏的条件，例如点击按钮、滑动手势等。

以下是一个简单的示例代码，用于创建一个可以播放视频的悬浮窗：

import 'package:flutter/material.dart';
import 'package:flutter_floating/flutter_floating.dart';
import 'package:video_player/video_player.dart';

class VideoFloatingWidget extends StatefulWidget {
  @override
  _VideoFloatingWidgetState createState() => _VideoFloatingWidgetState();
}

class _VideoFloatingWidgetState extends State<VideoFloatingWidget> {
  VideoPlayerController _controller;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FloatingWidget(
      child: GestureDetector(
        onTap: () {
          setState(() {
            _isPlaying = !_isPlaying;
            if (_isPlaying) {
              _controller.play();
            } else {
              _controller.pause();
            }
          });
        },
        child: Container(
          color: Colors.white,
          child: AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: [
                VideoPlayer(_controller),
                _isPlaying
                    ? Container()
                    : Icon(Icons.play_arrow, size: 50, color: Colors.black),
                VideoProgressIndicator(_controller, allowScrubbing: true),
              ],
            ),
          ),
        ),
      ),
      width: 200,
      height: 200,
      offset: Offset(100, 100),
      showCloseButton: true,
      onClose: () {
        setState(() {
          _isPlaying = false;
          _controller.pause();
        });
      },
    );
  }
}

flutter单选按钮

在 Flutter 中，可以使用 `Radio` 和 `RadioListTile` 来实现单选按钮。这里简单介绍一下它们的用法。

1. Radio

`Radio` 是一个简单的单选按钮，通常与 `RadioGroup` 一起使用。在 `Radio` 中，我们需要指定一个 `value` 和一个 `groupValue`，其中 `value` 表示当前单选按钮的值，`groupValue` 表示整个单选按钮组的值。当 `value` 等于 `groupValue` 时，该单选按钮被选中。

以下是 `Radio` 的一个简单示例：

int _groupValue = 1;

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Radio(
        value: 1,
        groupValue: _groupValue,
        onChanged: (value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
      Radio(
        value: 2,
        groupValue: _groupValue,
        onChanged: (value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
    ],
  );
}

2. RadioListTile

`RadioListTile` 是一个更加复杂的单选按钮，它包含一个标题和一个副标题。它通常用于在列表中显示单选按钮。

以下是 `RadioListTile` 的一个简单示例：

int _groupValue = 1;

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      RadioListTile(
        title: Text('选项1'),
        value: 1,
        groupValue: _groupValue,
        onChanged: (value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
      RadioListTile(
        title: Text('选项2'),
        value: 2,
        groupValue: _groupValue,
        onChanged: (value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
    ],
  );
}

以上就是 Flutter 中实现单选按钮的方法。