- Article information - Author: Jack Lee (jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: [email protected].
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/131387549
【介绍】：本文介绍Flutter中文本类组件，包括普通文本组件、富文本组件、输入框组件。
Table of contents
1 Text (text) part
The Text component is one of the most basic and commonly used components in Flutter, used to display simple text content. It allows us to add and customize text styles in our application.
1.1 Create a Text widget
To create a Text widget in Flutter, we simply use the Text constructor and pass the string to display. For example:
Text('Hello, Flutter!')
Sorry, here is Texta detailed analysis of components in Flutter:
TextComponents are used to display simple text on the screen, which can automatically wrap lines and support text styles, such as font, size, color, etc. It is a basic Flutter component that inherits from StatelessWidget .
TextComponents have multiple properties, the following are some commonly used properties:
| Attributes | describe |
|---|---|
data |
The text to display. This is a required parameter. |
style |
Object for customizing text styles TextStyle. You can set font size, color, weight and other properties. |
textAlign |
Text alignment. Possible values include TextAlign.left, TextAlign.right, and TextAlign.centerso on. |
textDirection |
text direction. Possible values are TextDirection.ltr(left to right) and TextDirection.rtl(right to left). |
maxLines |
The maximum number of lines of text. Text beyond that number of lines will be truncated. |
overflow |
How to handle when the text exceeds the display area. Possible values include TextOverflow.clip, TextOverflow.fade, and TextOverflow.ellipsisso on. |
softWrap |
Whether to wrap lines at newlines. The default value is true. |
textScaleFactor |
Text scaling factor. Used to adjust text size according to system settings. |
for example:
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
In this example, we create a Textcomponent that displays the text "Hello, Flutter!", and set the font size to 24, font weight to bold, and font color to blue. The text will be center-aligned, displayed on a maximum of two lines, and any excess will be indicated by an ellipsis.
1.2 Set the Text style
TextStyleClass is used to set the text style, it includes the following properties:
| Attributes | describe |
|---|---|
color |
Text color. |
fontSize |
text size. |
fontWeight |
Font weight. Possible values include FontWeight.normal, , FontWeight.boldetc. |
fontStyle |
font style. Optional values include FontStyle.normaland FontStyle.italic. |
decoration |
Text decoration. Possible values include TextDecoration.none, TextDecoration.underline, TextDecoration.overlineand TextDecoration.lineThrough. |
decorationColor |
Text decoration color. |
decorationStyle |
Text decoration style. Possible values include TextDecorationStyle.solid, TextDecorationStyle.double, and TextDecorationStyle.dottedso on. |
We can stylestyle the Text widget using attributes. To do this, we need to create an TextStyleobject and pass to stylethe property. A TextStyle object can contain various style attributes, such as font size, color, font weight, and so on.
for example:
Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: Colors.blue,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dotted,
),
)
In this example, we create a Textcomponent that displays the text "Hello, Flutter!", and set the font size to 24, font weight to bold, font color to blue, and font style to italic. The text underline color is red and the style is dotted.
1.3 Text alignment and line wrapping
The Text component also provides some properties for controlling the alignment and wrapping of text. For example:
| Attributes | describe |
|---|---|
textAlignAttributes |
It is used to set the horizontal alignment of the text, which can be TextAlign.left, TextAlign.center, TextAlign.rightetc. |
maxLinesAttributes |
Used to set the maximum number of displayed lines of text. Excess text will be truncated. |
overflowAttributes |
It is used to set the text truncation method when the maximum number of lines is exceeded, such as TextOverflow.ellipsis, , TextOverflow.clipetc. |
Here is an example of setting the alignment and wrapping properties:
Text(
'Hello, Flutter!',
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
1.4 Summary
The Text widget is one of the most basic components in a Flutter application. We can easily customize how text is displayed by setting different properties such as style, alignment, and line wrapping. In the next chapters, we will learn about other basic components such as Image and Icon widgets.
2 Rich Text (RichText) component
The RichText component is another component in Flutter for displaying text, which allows us to use multiple styles in a piece of text. Compared with the Text component, the RichText component provides more advanced text style customization functions.
2.1 Create a RichText component
To create a RichText widget in Flutter , we need to use the RichText constructor and pass a TextSpan object. TextSpan objects can contain text content and styles, and can contain other TextSpan objects as child nodes.
For example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('RichText Example')),
body: Center(
child: RichText(
text: const TextSpan(
children: [
TextSpan(
text: 'Hello, ',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue),
),
TextSpan(
text: 'Flutter ',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.normal,
color: Colors.green),
),
TextSpan(
text: 'World!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.red),
),
],
),
),
),
),
);
}
}
2.2 Set RichText style
Similar to the Text widget, we can stylestyle the RichText widget using properties. However, since RichText components can contain multiple styles, we need to TextSpanset styles for each object separately. Here is an example:
RichText(
text: TextSpan(
text: 'Hello, ',
style: TextStyle(fontSize: 24, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: 'Flutter',
style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
),
TextSpan(
text: '!',
style: TextStyle(fontSize: 24, color: Colors.black),
),
],
),
)
The effect is:
2.3 Rich Text Alignment and Line Wrap
Similar to the Text component, the RichText component also provides some properties for controlling the alignment and wrapping of the text. For example:
| Attributes | describe |
|---|---|
textAlignAttributes |
It is used to set the horizontal alignment of the text, which can be TextAlign.left, TextAlign.center, TextAlign.rightetc. |
maxLinesAttributes |
Used to set the maximum number of displayed lines of text. Excess text will be truncated. |
overflowAttributes |
It is used to set the text truncation method when the maximum number of lines is exceeded, such as TextOverflow.ellipsis, , TextOverflow.clipetc. |
Here is an example of setting the alignment and wrapping properties:
RichText(
text: TextSpan(
text: 'Hello, ',
style: TextStyle(fontSize: 24, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: 'Flutter',
style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
),
TextSpan(
text: '!',
style: TextStyle(fontSize: 24, color: Colors.black),
),
],
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
2.4 Summary
The RichText component is a component used to display text with various styles in Flutter applications. By using TextSpanobjects, we can easily set different styles for text. In the next chapters, we will learn about other basic components such as Image and Icon widgets.
3. Input box (TextField) component
The input box (TextField) component is a component in Flutter used to receive user input. We can use this to create text input boxes that allow users to enter and edit text.
3.1 Create a TextField component
To create a TextField widget in Flutter, we just use the TextField constructor. For example:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('TextField Example')),
body: const Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
TextField(
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
border: OutlineInputBorder(),
),
),
SizedBox(height: 16),
TextField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
border: OutlineInputBorder(),
),
),
],
),
),
),
);
}
}
3.2 Set the TextField style
We can styleset the text style for the TextField widget using properties. To do this, we need to create an TextStyleobject and pass to stylethe property. A TextStyle object can contain various style attributes, such as font size, color, font weight, and so on. Here is an example:
TextField(
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w500,
),
)
3.3 Set placeholder text
We can decorationset placeholder text for TextField widget using properties. To do this, we need to create an InputDecorationobject and pass to decorationthe property. Here is an example:
TextField(
decoration: InputDecoration(
hintText: '请输入用户名',
),
)
3.4 Set text alignment
We can textAlignset the text alignment for the TextField widget using properties. For example, it can be set to TextAlign.left, TextAlign.center, TextAlign.rightetc. Here is an example:
TextField(
textAlign: TextAlign.center,
)
3.5 Get the text entered by the user
To get the text entered by the user, we need to use TextEditingController. First, create a TextEditingController object, and then pass it to controllerthe properties of the TextField component. Finally, we can textget the entered text through the properties of the TextEditingController object. Here is an example:
final TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
)
// 获取输入的文本
String inputText = _controller.text;
3.6 Summary
The input box (TextField) component is a component used to receive user input in a Flutter application. We can easily customize how the input box is displayed by setting different properties such as style, placeholder text, alignment, etc. In the next chapters, we will learn about other basic components such as the Button widget.