flutter - Flutter 从 List 动态创建 RichText 对象

Question

有一个长度不固定的随机列表。例如

  List<String> exampleList = List<String>();
   exampleList.add("one");
   exampleList.add("second random line");
   exampleList.add("third random line");

根据exampleList[index]随机生成的内容，需要更改外观、设计、样式等。如果使用RichText TextSpan，则已经将硬编码的数据传输到那里，我需要RichText动态生成。对此有什么想法吗？

格式化的近似结果

 child: RichText(
               text: TextSpan(
                          text: 'GitHub is a development platform inspired by the way you work. From ',
                          style: TextStyle(
                              color: Colors.grey,
                              fontSize: 20,
                              ),
                          children: <TextSpan>[
                            TextSpan(text: 'op_n',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                   ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Scaffold.of(context).showSnackBar(SnackBar(
                                      content: Text("Sending Message"),
                                    ));
                                  }
                            ),
                            TextSpan(
                                text: ' to ',
                                style: TextStyle(color: Colors.grey,
                                    fontSize: 20,
                                  )
                            ),
                            TextSpan(
                                text: 'busin_ss,',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Scaffold.of(context).showSnackBar(SnackBar(
                                      content: Text("Sending Message"),
                                    ));
                                  }
                            ),
                            TextSpan(
                                text: ' you can host and review code, manage projects, and build software alongside 36 million developers.',
                                style: TextStyle(color: Colors.grey,
                                    fontSize: 20,
                                    )
                            )
                          ]
                      ),
                    )

标签： flutter

Answer 1

根据您的示例，我看到您RichText使用 a text、 astyle和可选的 a定义了您的每个部分callback。

您可以使用 aList<MyText>而不是 a List<String>：

class MyText {
  final String text;
  final TextStyle style;
  final void Function(BuildContext) callback;

  MyText({
    this.text,
    this.style,
    this.callback,
  });
}

List<MyText> textSpanList = [
  MyText(
    text:
        'GitHub is a development platform inspired by the way you work. From ',
    style: TextStyle(
      color: Colors.grey,
      fontSize: 20,
    ),
  ),
  MyText(
    text: 'op_n',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
    callback: (context) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("Sending Message"),
        ),
      );
    },
  ),
  MyText(
    text: ' to ',
    style: TextStyle(
      color: Colors.grey,
      fontSize: 20,
    ),
  ),
  MyText(
    text: 'busin_ss,',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
    callback: (context) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("Sending Message"),
        ),
      );
    },
  ),
  MyText(
    text:
        ' you can host and review code, manage projects, and build software alongside 36 million developers.',
    style: TextStyle(
      color: Colors.grey,
      fontSize: 20,
    ),
  ),
];

然后使用List<MyText>如下：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(body: MyWidget()),
    ),
  );
}

class MyWidget extends StatelessWidget {
  const MyWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      padding: const EdgeInsets.all(8.0),
      child: RichText(
        text: TextSpan(
          children: textSpanList
              .map(
                (data) => data.callback == null
                    ? TextSpan(
                        text: data.text,
                        style: data.style,
                      )
                    : TextSpan(
                        text: data.text,
                        style: data.style,
                        recognizer: TapGestureRecognizer()
                          ..onTap = () => data.callback(context),
                      ),
              )
              .toList(),
        ),
      ),
    );
  }
}