Question

如何在Flutter中实现文本段落的首字母大写。
如下：

Answer 1

我设法一起破解了它，看起来它应该可以工作，但是由于某种原因并没有在正确的位置中断。 getPositionForOffset的索引似乎太大。也许总比没有好，它演示了如何使用TextPainter来获取文本的大小。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MaterialApp(title: 'Demo', home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      body: Container(
        width: 200.0,
        decoration: BoxDecoration(border: Border.all()),
        child: DropCapText(
          dropCap: "L",
          dropCapStyle: Theme.of(context).textTheme.display3,
          text: "orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          textStyle: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
  );
}

class DropCapText extends StatelessWidget {
  final String dropCap;
  final TextStyle dropCapStyle;
  final String text;
  final TextStyle textStyle;
  final EdgeInsets dropCapPadding;

  DropCapText({this.dropCap, this.dropCapStyle, this.text, this.textStyle, this.dropCapPadding = EdgeInsets.zero});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        //get the drop cap size
        final dropCapSpan = TextSpan(text: dropCap, style: dropCapStyle);
        final dropCapPainter = TextPainter(text: dropCapSpan, textDirection: Directionality.of(context));
        dropCapPainter.layout(maxWidth: constraints.maxWidth);
        final dropCapSize = dropCapPainter.size;

        //get the position of the last bit of text next to the dropcap
        final textSpan = TextSpan(text: text, style: textStyle);
        final textPainter = TextPainter(text: textSpan, textDirection: Directionality.of(context));
        textPainter.layout(maxWidth: max(constraints.minWidth, constraints.maxWidth - dropCapPadding.horizontal - dropCapSize.width));
        final lastPosition = textPainter.getPositionForOffset(Offset(textPainter.width, dropCapSize.height + dropCapPadding.vertical));

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: dropCapPadding,
                  child: Text(dropCap, style: dropCapStyle),
                ),
                Expanded(
                  child: Text(text.substring(0, lastPosition.offset), style: textStyle, softWrap: true,),
                ),
              ],
            ),
            Text(text.substring(lastPosition.offset), style: textStyle),
          ],
        );
      }
    );
  }
}

Answer 2

您可以这样构建

请在StackOverFlow中查看我的答案

Flutter中的大写字母

2 个答案: