[英]“How to create two text widgets in a row widget”
"I'm a beginner in flutter, I want to display two text in row.where "hello" is the first text widget and "world" is another text widget “我是 flutter 的初学者,我想在行中显示两个文本。其中“hello”是第一个文本小部件,“world”是另一个文本小部件
I tried doing this with my basic knowledge but I came across these errors我尝试用我的基本知识做到这一点,但我遇到了这些错误
Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined.
Horizontal RenderFlex with multiple children 有一个 null textDirection,所以布局顺序是未定义的。 'package:flutter/src/rendering/flex.dart': Failed assertion: line 439 pos 18: 'textDirection != null'
'package:flutter/src/rendering/flex.dart':断言失败:第 439 行 pos 18:'textDirection != null'
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
Text("hello",textDirection: TextDirection.rtl,),
Text("world",textDirection: TextDirection.rtl,)
],
);
}
}
Maybe you want to use RichText instead?也许您想改用 RichText?
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'hello', style: TextStyle(color: Colors.red)),
TextSpan(text: ' world', style: TextStyle(color: Colors.blue)),
],
),
)
Please try below code:-请尝试以下代码:-
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Hello",style: TextStyle(color: Colors.blue)),
Text("World",style: TextStyle(color: Colors.blue))
],
);
}
**Try This Simplest Way**
import 'package:flutter/material.dart';
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Row(
children: <Widget>[
Text("Hello"),
Text("World"),
],
),
),
);
}
}
Please read this link about Row in Flutter:请阅读有关 Flutter 中的行的链接:
https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041
In a nutshell, you Declare a Row and the items that will be inside that row are the children (Which must be widgets).简而言之,您声明一个行,该行内的项目是子项(必须是小部件)。
I picked an example from here https://flutter.dev/docs/development/ui/layout我从这里选择了一个例子https://flutter.dev/docs/development/ui/layout
something like this像这样的东西
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
],
);
In Your case, you just have to erase the image.asset and change it for texts...在您的情况下,您只需删除 image.asset 并将其更改为文本...
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Hello'),
Text('World'),
],
);
or whatever you want.或任何你想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.