在 Card Flutter 中的 ListTile 中的熱門文本居中

Question

我需要將數字移動到卡片的中心並將播放按鈕放在卡片的右下方。 我希望你能幫助我。 謝謝

@override
  Widget build(BuildContext context) {
    return Card(
      color: const Color(0x665050f1),
      child: ListTile(
        title: Text(
          widget.index.toString(),
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 40.0,
            color: Colors.white,
            fontWeight: FontWeight.w700,
          ),
        ),
        trailing: IconButton(
          icon: Icon(
            Icons.play_arrow,
            size: 50.0,
            color: _playing
                ? Theme.of(context).colorScheme.primary
                : Theme.of(context).colorScheme.onBackground.withOpacity(.5),
          ),
          onPressed: _playing ? null : _play,
        ),
      ),
    );
  }
}

Answer 1

在IconButton上使用iconSize而不是 Icon 的size 。 我認為在這種情況下使用Stack會更好。

SizedBox(
  height: 200,
  width: 200,
  child: Card(
    color: const Color(0x665050f1),
    child: Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Text(
            "1",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 40.0,
              color: Colors.white,
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
        Positioned(
          right: 0, //changes to have some gap
          top: 0,
          child: IconButton(
              alignment: Alignment.center,
              iconSize: 50,
              icon: Icon(Icons.play_arrow,
                  // size: 50.0,
                  color:
                      // _playing
                      // ?
                      Theme.of(context).colorScheme.primary
                  // : Theme.of(context).colorScheme.onBackground.withOpacity(.5),
                  ),
              onPressed: () {}
              //  _playing ? null : _play,
              ),
        ),
      ],
    ),
  ),
),

更多關於Stack