2个容器中扑之间的文本

Question

我想显示2个容器中扑之间的文本。问题是，容器适应文本的大小。我不希望这样的行为。希望是这样的。 （很新的扑）。

我想打一个音乐播放器。文本不能分割。

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;
}