Question

我正在构建一个Flutter应用程序，并且正在使用ExpansionTile的示例代码：

import 'package:flutter/material.dart';

class ExpansionTileSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('ExpansionTile'),
        ),
        body: new ListView.builder(
          itemBuilder: (BuildContext context, int index) =>
              new EntryItem(data[index]),
          itemCount: data.length,
        ),
      ),
    );
  }
}

// One entry in the multilevel list displayed by this app.
class Entry {
  Entry(this.title, [this.children = const <Entry>[]]);

  final String title;
  final List<Entry> children;
}

// The entire multilevel list displayed by this app.
final List<Entry> data = <Entry>[
  new Entry(
    'Chapter A',
    <Entry>[
      new Entry(
        'Section A0',
        <Entry>[
          new Entry('Items:\n\nItem A0.1\nItem A0.1.1'),
          new Entry('Item A0.2'),
          new Entry('Item A0.3'),
        ],
      ),
      new Entry('Section A1'),
      new Entry('Section A2'),
    ],
  ),

];

// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
class EntryItem extends StatelessWidget {
  const EntryItem(this.entry);

  final Entry entry;

  Widget _buildTiles(Entry root) {
    if (root.children.isEmpty) return new ListTile(
       title: new Text(root.title));
    return new ExpansionTile(
      key: new PageStorageKey<Entry>(root),
      title: new Text(root.title),
      children: root.children.map(_buildTiles).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

https://flutter.io/catalog/samples/expansion-tile-sample/

我正在寻找一种添加粗体并更改条目文本颜色的方法，例如，将文本：'Items:\n\nItem A0.1\nItem A0.1.1'更改为Items:，将红色的Item A0.1和红色的{ {1}}呈绿色。

我喜欢TextSpan类，但无法在Item A0.1.1类中使用它。

Answer 1

我认为您正在寻找的是TextStyle小部件，它是在Text小部件内使用的，就像这样：

Widget _buildTiles(Entry root) { if (root.children.isEmpty) return new ListTile( title: new Text(root.title, style: TextStye(fontWeight: FontWeight.bold)); return new ExpansionTile( key: new PageStorageKey<Entry>(root), title: new Text(root.title), children: root.children.map(_buildTiles).toList(), ); }

您可以使用该TextStyle小部件更改颜色，样式和权重，将其检出Here

或者，如果您想在扩展时进行一些更改，则需要在ExpantionTile选项和骰子中的onExpantionChange中进行更改，不要忘记在setState内进行

Answer 2

您可以尝试使用RichText软件包的css_text小部件。

String htmlContent =
"<p><b>Items</b> <span style="color:#ffff0000">Item A0.1</span>
<span style="color:#ff00ff00">Item A0.1.1</span></p>";

var myRichText = RichText(text: HTML.toTextSpan(context, htmlContent));

一年后回答。它可以帮助您或其他人。

更改文本样式可扩展列表Flutter

2 个答案: