flutter - 颤动中两个容器之间的文本

Question

我想在颤动的 2 个容器之间显示一个文本。问题是容器适应文本的大小。我不希望这种行为。想要这样的东西。（我很陌生）。

我想做一个音乐播放器。文本不能拆分。

标签： flutterflutter-layout

Answer 1

编辑：根据您的要求，您希望创建一个自定义播放器，根据歌曲当前位置更新其颜色。

为此，您可以创建一个CustomPaint带有CustomPainter播放器的小部件，该播放器会在歌曲状态更改时更新。

class MyPlayerBar extends CustomPainter {
  MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});

  final int fullSongTimeInSeconds;
  final int currentSecond;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
    Radius cornerRadius = Radius.circular(3.0);

    // Already played half color (your darker orange)
    paint.color = Color.fromRGBO(206, 69, 0, 1.0);

    // Painting already played half
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
            topLeft: cornerRadius, bottomLeft: cornerRadius),
        paint);

    // Yet to play half color (your lighter orange)
    paint.color = Color.fromRGBO(227, 113, 18, 1.0);

    // Painting the remaining space
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
            bottomRight: cornerRadius, topRight: cornerRadius),
        paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

我创建了一个完整的示例来模拟一首 3 分钟的歌曲（180 秒），结果如下：

完整示例代码：

class MyPlayer extends StatefulWidget {
  _MyPlayerState createState() => _MyPlayerState();
}

class _MyPlayerState extends State<MyPlayer> {
  int _songCurrentPosition = 0;
  int _fullSongInSeconds = 180; // 3 minutes song

  @override
  void initState() {
    super.initState();
    _songPlaying();
  }

  void _songPlaying() async {
    if (_songCurrentPosition >= _fullSongInSeconds) return;
    await Future.delayed(Duration(seconds: 1));
    setState(() => _songCurrentPosition += 1);
    _songPlaying();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My player'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: CustomPaint(
          painter: MyPlayerBar(
            currentSecond: _songCurrentPosition, // Your current song position in seconds
            fullSongTimeInSeconds: _fullSongInSeconds,
          ),
          child: Container(
            alignment: Alignment.center,
            height: 30.0,
            width: double.infinity,
            child: Text(
              'Playing: 01 - Hey, this is my life',
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPlayerBar extends CustomPainter {
  MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});

  final int fullSongTimeInSeconds;
  final int currentSecond;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
    Radius cornerRadius = Radius.circular(3.0);

    // Already played half color (your darker orange)
    paint.color = Color.fromRGBO(206, 69, 0, 1.0);

    // Painting already played half
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
            topLeft: cornerRadius, bottomLeft: cornerRadius),
        paint);

    // Yet to play half color (your lighter orange)
    paint.color = Color.fromRGBO(227, 113, 18, 1.0);

    // Painting the remaining space
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
            bottomRight: cornerRadius, topRight: cornerRadius),
        paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}