Flutter web 颤振Web-列文本中的TextAlign.justify由于画师画布而被忽略
我有一个场景,当包含在Flutter web 颤振Web-列文本中的TextAlign.justify由于画师画布而被忽略,flutter-web,Flutter Web,我有一个场景,当包含在列中时,文本中的TextAlign.justify会被忽略,该列还包含一个带有特定画布内容的CustomPainter 例如: import 'package:flutter/material.dart'; void main() => runApp(TextJustifyExample()); class TextJustifyExample extends StatelessWidget { @override Widget build(BuildCo
列
中时,文本
中的TextAlign.justify
会被忽略,该列还包含一个带有特定画布
内容的CustomPainter
例如:
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)),
SizedBox(height: 50),
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.',
style: const TextStyle(
fontSize: 16, height: 1.75),
textAlign: TextAlign.justify,
)),
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...',
style: const TextStyle(
fontSize: 16, height: 1.75),
textAlign: TextAlign.justify,
)),
]))
]))));
}
}
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, 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, halfHeight), debugPaint);
// This instruction causes TextAlign.justify to FAIL in owner Column's Text Widgets.
canvas.drawCircle(Offset(halfWidth, halfHeight), 50, debugPaint);
}
@override
bool shouldRepaint(APainter oldDelegate) => false;
}
---更新---
如果我将CustomPainter
和Text
小部件包含在ListView
中,而不是列中,则会维护Text
小部件中的TextAlign.justify
指令,这为我提供了一种解决方法。但最好知道为什么使用列
小部件会导致这种奇怪的行为?注意:使用Wrap
小部件也会导致这种奇怪的行为
---更新2---
在Firefox
web浏览器上,也不会维护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!