如何正确地调整文本两端对齐?

huangapple go评论68阅读模式
英文:

How to justify text properly?

问题

I am using textAlign: TextAlign.justify in a flutter Text widget and it only works if the text is wider than the screen. If the text is shorter than the available width it centers the text.

What I want is normal paragraph justification (ie. the same as a word processor) whereby long lines are justified and short lines are left aligned.

Here is my code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TestClass(),
      ),
    );
  }
}

class TestClass extends StatefulWidget {
  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  double loginWidth = 40.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(),
      ),
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const Text(
            'If you have a long line of text then the text text is wider than the screen and it justifies correctly, just as you would expect. So far so good.',
            textAlign: TextAlign.justify,
          ),
          const SizedBox(height: 20),
          const Text(
            'This is wrong',
            textAlign: TextAlign.justify,
          ),
        ],
      ),
    );
  }
}

And this is what it looks like:

如何正确地调整文本两端对齐?

Any suggestions as to what alignment I can use to handle both short and long text?

英文:

I am using textAlign: TextAlign.justify in a flutter Text widget and it only works if the text is wider than the screen. If the text is shorter than the available width it centers the text.

What I want is normal paragraph justification (ie. the same as a word processor) whereby long lines are justified and short lines are left aligned.

Here is my code:

import &#39;package:flutter/material.dart&#39;;

void main() =&gt; runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TestClass(),
      ),
    );
  }
}

class TestClass extends StatefulWidget {
  @override
  _TestClassState createState() =&gt; _TestClassState();
}

class _TestClassState extends State&lt;TestClass&gt; {
  double loginWidth = 40.0;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(),
        ),
        padding: EdgeInsets.all(10),
        child: Column(
            mainAxisSize: MainAxisSize.min,
            children: &lt;Widget&gt;[
                const Text(
                    &#39;If you have a long line of text then the text text is wider than the screen and it justifies correctly, just as you would expect. So far so good.&#39;,
                    textAlign: TextAlign.justify,
                ),
                const SizedBox(height: 20),
                const Text(
                    &#39;This is wrong&#39;,
                    textAlign: TextAlign.justify,
                ),
            ],
        )
    );
  }
}

And this is what it looks like:

如何正确地调整文本两端对齐?

Any suggestions as to what alignment I can use to handle both short and long text?

答案1

得分: 2

Justify属性在文本长度大于容器宽度时起作用,如果希望两者都从开头开始,请使用crossAxisAlignment: CrossAxisAlignment.start

child: Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
)
英文:

Justify property would work when length of text is greater to width of container, if you want both text to start from starting use crossAxisAlignment: CrossAxisAlignment.start

child: Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
)

huangapple
  • 本文由 发表于 2023年5月15日 06:35:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76249957.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定