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!