在自定义画笔颤振中包装段落文本

时间:2020-08-12 20:13:30

标签: flutter dart text builder paragraph

我正在尝试在文本上敲击段落到画布上。有什么办法吗?代码如下所示。我正在尝试将文本包装在画布中。生成器方法中会发生这种情况吗?我已经尝试过将文本分别添加到代码的..addText()部分,但是它只是写一条直线文本,直到它掉到屏幕上为止。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'dart:ui';
void main() {
  runApp(
    CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: BottomNavigationBar()
    ),
  );
}

class BottomNavigationBar extends StatefulWidget {
  @override
  _BottomNavigationBarState createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<BottomNavigationBar> {
  double iconSize;
  initState() {
    super.initState();
    iconSize = 24.0;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: Size(300, 500),
          painter: MyPainter(),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    final p1 = Offset(30, 135);
    final p2 = Offset(150, 135);
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 4;
    canvas.drawLine(p1, p2, paint);
    paint.color = CupertinoColors.activeBlue;
    canvas.drawCircle(Offset(100,100), 30, paint);
    paint.color = CupertinoColors.activeGreen;
    canvas.drawRRect(RRect.fromLTRBR(0,0,100,30,Radius.circular(10)), paint);
    paint.color = CupertinoColors.destructiveRed;
    canvas.drawRRect(RRect.fromLTRBR(0,40,75,70,Radius.circular(10)), paint);
    paint.color = CupertinoColors.systemPink;
    canvas.drawRRect(RRect.fromLTRBR(0,80,50,110,Radius.circular(10)), paint);
    paint.color = CupertinoColors.systemPurple;
    canvas.drawRect(
      Rect.fromCenter(center:Offset(0,0), width: 20, height: 20),
      paint
    );

    final text = '''I don't think that you have any insight whatsoever into your capacity for good until you have some well-developed insight into your capacity for evil.\”― Jordan B. Peterson''';
    final ParagraphBuilder paragraphBuilder = ParagraphBuilder(
      ParagraphStyle(
        fontSize:   11,
        fontFamily: 'Raleway', 
        fontStyle:  FontStyle.normal,
        fontWeight: FontWeight.w400,
        textAlign: TextAlign.justify,
        maxLines: null
      )
    )
      ..addText(text);
    final Paragraph paragraph = paragraphBuilder.build()
      ..layout(ParagraphConstraints(width: size.width -12.0 - 12.0)); 
    canvas.drawParagraph(paragraph, const Offset(12.0, 150.0));
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

下面是一张只有一行的图片。如果我输入了足够多的文本以使画布大小溢出,则文本不会出现1。我想画一个段落,当到达画布边缘时文字会自动换行。

0 个答案:

没有答案