最佳答案
我设法将其破解在一起,看起来它应该可以工作,但由于某种原因没有在正确的位置中断。 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),
],
);
}
);
}
}
关于dart - Flutter 中的首字下沉字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54579979/