如何在 Flutter 中动态更新列表中元素的样式？

Question

我正在用颤振制作一个快速阅读练习应用程序。我尝试在我的列表上运行 foreach 循环来更新 TextSpans 不透明度，但它没有用。之后，我尝试用新的 TextSpan 和新的不透明度替换元素，元素在列表中发生了变化，但它没有呈现在屏幕上。这是我的代码。

  var textList = <TextSpan>[];
  @override
  void initState() {
    super.initState();            
    text.split(' ').forEach((element) {
      textList.add(TextSpan(text:element));                     
    });
  }

    Widget _textArea() {
      return FractionallySizedBox(
          widthFactor: 0.9,
          heightFactor: 0.9,
          child: DecoratedBox(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                  width: 1,
                ),
              ),
              child: RichText(
                  text: TextSpan(
                    children: textList
                  ),
                ) 
              ));
    }

我需要每秒更新textList 中每个元素的不透明度，并且更新函数必须以 ``ònPress```事件开始。 我被这个问题困住了。

完整代码

import 'package:flutter/material.dart';

class HomePeageReaderWidget extends StatefulWidget {
  const HomePeageReaderWidget({Key? key}) : super(key: key);

  @override
  _HomePageReaderWidgetState createState() => _HomePageReaderWidgetState();
}

class _HomePageReaderWidgetState extends State<HomePeageReaderWidget> {
  var text =
      """Gaziantep şehri Türkiye'nin güneydoğusundadır. Çok güzel bir şehirdir. Belki İstanbul ve Ankara kadar büyük değildir, ama yine de burada bir milyonun üstünde insan yaşıyor. Gaziantep'te iş alanları çok geniştir, herkes çalışıyor. Birçok fabrikalar ve atölyeler vardır. Ayrıca bir de Gaziantep Üniversitesi vardır. Üniversite şehirden biraz uzak, ama yurt da üniversitenin yanında. Bunun için ulaşım sorunu yok.Gaziantep'te yazın hava çok sıcak oluyor, insanlar evlerinden ve iş yerlerinden dışarıya çıkmıyorlar. Gece balkonlarda yatıyorlar. Kışın ise havalar sert, sokaklar ise her zaman ıslaktır.""";

  var textList = <TextSpan>[];
  @override
  void initState() {
    super.initState();
    text.split(' ').forEach((element) {      
      textList.add(TextSpan(text: element));
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget _controlRow() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.skip_previous),
                iconSize: 50,
                color: const Color(0xFFffcd05),
              )
            ],
          ),
          Column(
            children: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.pause_circle),
                iconSize: 50,
                color: const Color(0xFF91268e),
              )
            ],
          ),
          Column(
            children: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.skip_next),
                iconSize: 50,
                color: const Color(0xFFffcd05),
              )
            ],
          ),
        ],
      );
    }

    Widget _textArea() {
      return FractionallySizedBox(
          widthFactor: 0.9,
          heightFactor: 0.9,
          child: DecoratedBox(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                  width: 1,
                ),
              ),
              child: RichText(
                text: TextSpan(children: textList),
              )));
    }

    return Column(
      children: [
        Expanded(
          flex: 6,
          child: _textArea(),
        ),
        Expanded(
          child: _controlRow(),
        ),
        Container(
          width: 300,
          child: ElevatedButton.icon(
            onPressed: () {
              // Respond to button press
            },
            icon: Icon(Icons.play_arrow, size: 18),
            label: Text("Hızlı Egzersiz"),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all(const Color(0xFF075098)),
            ),
          ),
        )
      ],
    );
  }
}

Answer 1

您需要使用setState( )，以便您的更改反映在客户端中。

不要忘记您需要保留 StatefulWidget 以便 setState 工作

代码：

  onPressed: () {
    setState(() { 
      yourOpacityValue = updatedOpacityValue; });
  },