Flutter pluto_grid的一个单元格内有多种字体样式?

nnvyjq4y  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(166)

Flutter pluto_grid中可以有多种字体样式吗?我想展示两个字符串之间的区别,每个字符串都在单独的一栏中。
比如说
1.这是一个关于一个男孩的故事
1.这是一个关于一个男孩<font color=red style="text-decoration: line-through;">和一个女孩</font>的真实</font>故事。
我没有看到任何文档表明这是支持的。它不一定是CSS。我可以使用Flutter Table小部件来实现这一点,但我希望拥有pluto_grid附带的丰富UI特性。

ryhaxcpt

ryhaxcpt1#

因此,经过大量的修改,我发现PlutoColumn类对象有一个可选的“renderer”属性(我必须真正挖掘才能找到它)。您可以将任何小部件返回给这个属性,对于我的用例,我需要返回一个HTML小部件。
因此,如果您从pub.dev中获取pluto_grid示例代码,则可以在_PlutoGridExamplePageState中为PlutoColumn设置'renderer'属性,如下所示:

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> 
{
    final List<PlutoColumn> columns = <PlutoColumn>
    [
        PlutoColumn
        (
            title: 'SOURCE Language: English (EN)',
            field: 'source',
            type: PlutoColumnType.text(),
        ),
        PlutoColumn
        (
            title: 'RAW - Google Cloud Advanced Translation API',
            field: 'raw',
            type: PlutoColumnType.text(),        
        ),
        PlutoColumn
        (
            title: 'TARGET Language: Nepali (NE)',
            field: 'target',
            type: PlutoColumnType.text(),
            // SET THE 'renderer' property to an HTML widget
            // VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
            renderer: (rendererContext) { return Html( data: rendererContext.cell.value, ); },           
        ),
    ];

    final List<PlutoRow> rows = 
    [
        PlutoRow
        (
            cells: 
            {
                'source': PlutoCell(value: 'This is a sample row.' ),
                'raw':    PlutoCell(value: 'यो नमूना पङ्क्ति हो।', ),  
                'target': PlutoCell(value: 'यो नमूना पङ्क्ति हो।', ),
            },
        ),
        PlutoRow
        (
            cells: 
            {
                'source': PlutoCell(value: 'You data will look something like this' ),
                'raw':    PlutoCell(value: 'तपाईको डाटा केहि यस्तो देखिन्छ।', ),
                // TEXT WITH HTML CSS STYLE TAGS BELOW
                // VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
                'target': PlutoCell(value: 'तपाईको डाटा <font color=red style="text-decoration: line-through;">केहि यस्तो</font> <font color="green"> यस्तै यस्तै</font> देखिन्छ।', ),
            },
        ),
    ];

    /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
    /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
    late final PlutoGridStateManager stateManager;

    @override
    Widget build(BuildContext context) 
    {
        return Scaffold
        (
            body: Container
            (
                padding: const EdgeInsets.all(15),
                child: PlutoGrid
                (
                    columns: columns,
                    rows: rows,
                    //columnGroups: columnGroups,
                    onLoaded: (PlutoGridOnLoadedEvent event) 
                    {
                        stateManager = event.stateManager;
                        // stateManager.setShowColumnFilter(true);
                    },
                    onChanged: (PlutoGridOnChangedEvent event) 
                    {
                        print(event);
                    },
                    configuration: const PlutoGridConfiguration(),
                ),
            ),
        );
    }
}

希望这有帮助!

相关问题