如何解决Flutter Web-由于Painter画布而忽略了列文本中的TextAlign.justify
我有一种情况，当TextAlign.justify中的Text包含在Column中时，该CustomPainter也包含具有某些Canvas内容的import 'package:flutter/material.dart';
void main() => runApp(TextJustifyExample());
class TextJustifyExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TextJustifyWidget(),);
}
}
class TextJustifyWidget extends StatefulWidget {
TextJustifyWidget({Key key,this.title}) : super(key: key);
final String title;
@override
_TextJustifyState createState() => _TextJustifyState();
}
class _TextJustifyState extends State<TextJustifyWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(25),color: Colors.lightBlueAccent,height: 850,width: 450,//child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Container(
width: 400,child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,mainAxisAlignment: MainAxisAlignment.start,children: [
CustomPaint(
painter: APainter(),child: Container(width: 400,height: 100)),SizedBox(height: 50),const Text('SpongeBob SquarePants Text Demo',textAlign: TextAlign.center,style: const TextStyle(
fontSize: 24,color: Colors.redAccent)),Container(
color: Colors.yellow,child: Text(
'The longest of all paragraphs. This one definitely extends beyond the with of its parent and spans over multiple lines a few times over. Using TextAlign.justify should show this paragraph nicely boxed. SpongeBob SquarePants kind of boxed.',style: const TextStyle(
fontSize: 16,height: 1.75),textAlign: TextAlign.justify,)),Container(
color: Colors.white,child: Text(
'A short paragraph that fits in one line.',Container(
color: Colors.brown,child: Text(
'A long paragraph that hopefully extends beyond the with of its parent and spans over multiple lines. Fingers crossed it does...',]))
]))));
}
}
class APainter extends CustomPainter {
@override
void paint(Canvas canvas,Size size) {
final halfWidth = size.width / 2;
final halfHeight = size.height / 2;
final debugPaint = Paint()
..color = const Color(0xffff55dd)
..style = PaintingStyle.stroke
..strokeWidth = 0.4;
TextSpan span = new TextSpan(
style: new TextStyle(color: const Color(0xffff55dd)),text: '${size.width},${size.height}');
TextPainter tp = new TextPainter(
text: span,textAlign: TextAlign.left,textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas,new Offset(5.0,5.0));
// This instruction DOES NOT cause TextAlign.justify to fail in owner Column's Text Widgets.
Rect canvasRect = Rect.fromLTWH(0,size.width,size.height);
canvas.drawRect(canvasRect,debugPaint);
// This instruction causes TextAlign.justify to FAIL in owner Column's Text Widgets.
canvas.drawLine(Offset(halfWidth - 100,halfHeight),Offset(halfWidth + 100,debugPaint);
// This instruction causes TextAlign.justify to FAIL in owner Column's Text Widgets.
canvas.drawCircle(Offset(halfWidth,50,debugPaint);
}
@override
bool shouldRepaint(APainter oldDelegate) => false;
}
。
示例：
APainter您可以在canvas.drawXXX()中看到三个canvas.drawLine()调用（每个调用都包含注释），运行此示例时看到的行为是调用{{1 }}和canvas.drawCircle()导致父Text中的Column小部件忽略TextAlign.justify指令。然而，canvas.drawRect()调用不会导致TextAlign.justify指令被忽略。
如何在不影响父CustomPainter的{{1}}小部件的Canvas指令的情况下使用Column的{{1}}？
我的扑扑医生摘要是：
Text---更新---
如果我在TextAlign.justify中使用Doctor summary (to see all details,run flutter doctor -v):
[✓] Flutter (Channel beta,1.21.0-9.1.pre,on Linux,locale en_GB.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] Connected device (2 available)
• No issues found!
和CustomPainter小部件而不是Text，则在ListView小部件中使用Column指令维护，这为我提供了一种解决方法。但是最好知道为什么使用TextAlign.justify小部件会导致这种奇怪的行为吗？注意：使用Text小部件也会导致这种奇怪的行为。
---更新2 ---
在Column Web浏览器上，也未维护Wrap指令。当Firefox小部件位于TextAlign.justify或Text小部件中时，不会保留该值。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。