英文:
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 '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?
答案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,
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论