“如何在一个行小部件中创建两个文本小部件”答案

【问题标题】："How to create two text widgets in a row widget"“如何在一个行小部件中创建两个文本小部件”
【发布时间】：2020-03-08 02:45:55
【问题描述】：

“我是flutter的初学者，我想在一行中显示两个文本。其中“hello”是第一个文本小部件，“world”是另一个文本小部件

我尝试用我的基本知识来做这件事，但我遇到了这些错误

具有多个子项的水平 RenderFlex 的 textDirection 为空，因此未定义布局顺序。 '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,)
      ],
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

请尝试以下代码：-

@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))
      ],
    );
}

【讨论】：

回答前请阅读问题描述！

【解决方案2】：

**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"),
          ],
        ),
      ),
    );
  }
}

【讨论】：

回答前请阅读问题描述！

【解决方案3】：

请阅读此链接以了解 Flutter 中的行：

https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

简而言之，您声明一个行，该行内的项目是子项（必须是小部件）。

我从这里挑选了一个例子 https://flutter.dev/docs/development/ui/layout

类似的东西

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

在您的情况下，您只需删除 image.asset 并将其更改为文本...

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Hello'),
    Text('World'),

  ],
);

或任何你想要的。

【讨论】：

【解决方案4】：

也许您想改用 RichText？

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(text: 'hello', style: TextStyle(color: Colors.red)),
      TextSpan(text: ' world', style: TextStyle(color: Colors.blue)),
    ],
  ),
)

【讨论】：

@AnirudhSukumaran 这就是你要找的东西吗？在 stackoverflow 上，您应该接受/赞成对您有帮助的答案。