Flutter：顏色從側面擴展到填充容器

我目前有一個卡片小部件，其中包含兩個不同顏色的影片容器。當用戶單擊任一顏色時，容器的另一側會更改以匹配用戶的選擇。

當用戶點擊一側時，我希望顏色擴展并填充大約 90% 的卡片，仍然只顯示之前顏色的一小部分。例如，如果卡片開始時左邊是紅色，右邊是藍色，點擊藍色邊后，藍色會從右向左擴展，覆寫卡片的 90%，紅色會覆寫剩下的 10%左邊。

我希望這是有道理的。我是新來的，所以還在學習。

class _PickState extends State<Pick> {
  Color _colorA = Colors.red;
  Color _colorB = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              child: AnimatedContainer(
                color: _colorA,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              child: GestureDetector(
            child: AnimatedContainer(
              color: _colorB,
              child: const Text("Option B"),
              alignment: Alignment.centerRight,
              constraints: const BoxConstraints(minHeight: 75),
              duration: const Duration(milliseconds: 250),
            ),
            onTap: () {
              _clickB();
            },
          ))
        ],
      ),
    );
  }

  void _clickA() {
    setState(() {
      _colorA = Colors.red;
      _colorB = Colors.red;
    });
  }

  void _clickB() {
    setState(() {
      _colorA = Colors.blue;
      _colorB = Colors.blue;
    });
  }
}

uj5u.com熱心網友回復：

class _PickState extends State<Pick> {
  int _colorAPercentage = 90;
  int _colorBPercentage = 10;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: _colorAPercentage,
            child: GestureDetector(
              child: AnimatedContainer(
                color: Colors.red,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              flex: _colorBPercentage,
              child: GestureDetector(
                child: AnimatedContainer(
                  color: Colors.blue,
                  child: const Text("Option B"),
                  alignment: Alignment.centerRight,
                  constraints: const BoxConstraints(minHeight: 75),
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              ))
        ],
      ),
    );
  }

  void _clickA() {
    setState(() {
      _colorAPercentage = 90;
      _colorBPercentage = 10;
    });
  }

  void _clickB() {
    setState(() {
      _colorAPercentage = 10;
      _colorBPercentage = 90;
    });
  }
}

uj5u.com熱心網友回復：

如果我理解正確，試試這個。

@override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              child: AnimatedContainer(
                color: Colors.red,
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
            flex: 4,
            child: GestureDetector(
              child: AnimatedContainer(
                color: _colorA,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              flex: 4,
              child: GestureDetector(
                child: AnimatedContainer(
                  color: _colorB,
                  child: const Text("Option B"),
                  alignment: Alignment.centerRight,
                  constraints: const BoxConstraints(minHeight: 75),
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              )),
          Expanded(
              child: GestureDetector(
                child: AnimatedContainer(
                  color: Colors.blue,
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              ))
        ],
      ),
    );
  }

標籤：扑 镖

上一篇：應用欄上的InkWell高度飛濺

下一篇：WPFDataGrid，如何將類屬性系結為行？