單擊按鈕時顫動會改變顏色

我正在開發一個用戶可以展開和折疊文本的應用程式。我想在底部的文字模糊。一旦用戶展開文本，文本應該正常顯示。當文本再次折疊時，我希望底部的文本再次模糊。我通過以下方式解決了它。我的問題是當用戶折疊文本時，底部的文本不會再次模糊。

這是我的代碼：

class ExpandableText extends StatefulWidget {
  final String text;
  const ExpandableText({Key? key, required this.text}) : super(key: key);

  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  late String firstHalf;
  late String secondHalf;

  bool hiddenText = true;

  Color fadeStrong = Colors.black.withOpacity(0.8);
  Color fadeWeak = Colors.black.withOpacity(0.6);

  // double textHeight = Dimensions.screenHight / 5.63;
  double textHeight = 180;

  @override
  void initState() {
    super.initState();
    if (widget.text.length > textHeight) {
      firstHalf = widget.text.substring(0, textHeight.toInt());
      secondHalf =
          widget.text.substring(textHeight.toInt()   1, widget.text.length);
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        child: secondHalf.isEmpty
            ? Text(
                firstHalf,
                style: const TextStyle(color: Colors.white),
              )
            : Column(
                children: [
                  Text(
                    hiddenText ? ("$firstHalf...") : (firstHalf   secondHalf),
                    style: const TextStyle(color: Colors.white),
                  ),
                  InkWell(
                    onTap: () {
                      setState(() {
                        hiddenText = !hiddenText;
                        hiddenText
                            ? fadeStrong = fadeStrong
                            : fadeStrong = Colors.transparent;
                    hiddenText
                        ? fadeWeak = fadeWeak
                        : fadeWeak = Colors.transparent;
                      });
                    },
                    child: Row(
                      children: [
                        hiddenText
                            ? const Text(
                                'Read more',
                                style: TextStyle(color: Colors.blue),
                              )
                            : const Text('Read less',
                                style: TextStyle(color: Colors.blue)),
                        Icon(
                          hiddenText
                              ? Icons.arrow_drop_down
                              : Icons.arrow_drop_up_outlined,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  )
                ],
              ),
      ),
      Container(
        margin: const EdgeInsets.only(top: 52),
        height: 20,
        color: fadeStrong,
      ),
      Container(
        margin: const EdgeInsets.only(top: 32),
        height: 20,
        color: fadeWeak,
      ),
    ]);
  }
}

uj5u.com熱心網友回復：

當您覆寫點擊事件的顏色時，會丟失初始參考

               onTap: () {
                  setState(() {
                    hiddenText = !hiddenText;
                    hiddenText
                        ? fadeStrong = fadeStrong
                        : fadeStrong = Colors.transparent;
                hiddenText
                    ? fadeWeak = fadeWeak
                    : fadeWeak = Colors.transparent;
                  });
                },

也許你應該嘗試這樣的事情會幫助你

               onTap: () {
                  setState(() {
                    hiddenText = !hiddenText;
                    hiddenText
                        ? fadeStrong = Colors.black.withOpacity(0.8)
                        : fadeStrong = Colors.transparent;
                hiddenText
                    ? fadeWeak = Colors.black.withOpacity(0.6)
                    : fadeWeak = Colors.transparent;
                  });
                },

標籤：扑 用户界面 设置状态 可扩展

上一篇：如何使用尾風在懸停時向我的影像（不是背景）添加漸變過渡

下一篇：為什么串列元素最初不呈現，但在React中的狀態更改后會呈現？