如何在 Android Studio 中使文本在使用中居于首位（Flutter）答案

【问题标题】：How to make text be on top in use (Flutter) in Android Studio如何在 Android Studio 中使文本在使用中居于首位（Flutter）
【发布时间】：2020-11-21 06:58:04
【问题描述】：

所以我想在flutter框架中制作一个简单的文本，但我不知道要让文本放在文本的顶部，这是我想要放在顶部的图像示例：

这是我的 DetailPage.dart ：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.redAccent,
          title: Text(
            'Detail ' + itemJudul,
            style: TextStyle(color: Colors.white),
          )),
      body: Column(

        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Center(child: Image.asset(itemImage)),
          Text(
            itemJudul,
            style: TextStyle(color: Colors.redAccent, fontSize: 30.0),
          ),
          Text(itemSub),
          Text('Sisa Item =' + qty),
          Container(
            width: 200,
            child: Text("Bahan Bahan",
                textAlign: TextAlign.left,
                style: new TextStyle(fontWeight: FontWeight.bold) // has impact
                ),
            alignment: Alignment.centerLeft,
          ),
          Container(
            child: Text(
              listbahanan,
              textAlign: TextAlign.left,
            ),
            alignment: Alignment.centerLeft,
          ),
          Container(
            child: Text(
              listbahan2,
              textAlign: TextAlign.right,
            ),
            alignment: Alignment.center,
            padding: EdgeInsets.all(5),
          )
        ],
      ),
    );
  }

【问题讨论】：

在上面是什么意思？在什么之上？应该在哪里？
你看不到我的截图。
嘿，@Mobina 你明白我的问题吗？
该图像中有很多文本，但我假设您希望列表中的 11-18 项位于 1-10 项旁边。另外，请在您的问题中包含您的代码。
请再次查看我的答案，我正在更新我的答案

标签： android flutter dart flutter-layout

【解决方案1】：

你可以使用两列包裹在一行中。

Row(
  children: [
    Expanded(
      child: Container(
          child: Text(
            listbahanan,
            textAlign: TextAlign.left,
          ),
          alignment: Alignment.centerLeft,
       ),
    ),
    Expanded(
      child: Container(
        child: Text(
           listbahan2,
           textAlign: TextAlign.right,
        ),
        alignment: Alignment.center,
        padding: EdgeInsets.all(5),
     )
  ],
),

【讨论】：

在我的情况下，我使用的是 textAlign: TextAlign.right, )，alignment: Alignment.centerRight，但不起作用。
只需将这两个容器包装成一排，使它们并排放置，而不是一个接一个。如果文本倾向于超出屏幕，请使用 Expanded。
你的意思是我必须把 Row() 放在 (Center(child: Image.asset(itemImage)), ) 的文本下，就像那样
是的，删除最后两个容器并用包含这些容器的 Row 替换它们。这样他们就可以并肩而行了。 @Misbagas
当我将最后两个容器更改为 Row () 时，出现错误。

【解决方案2】：

您需要使用Row 将两个列表并排对齐。另外，我认为将列表存储为字符串不是一个好主意，最好使用List 进行存储，ListView 用于显示列表项。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.redAccent,
          title: Text(
            'Detail ' + itemJudul,
            style: TextStyle(color: Colors.white),
          )),
      body: Column(

        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Center(child: Image.asset(itemImage)),
          Text(
            itemJudul,
            style: TextStyle(color: Colors.redAccent, fontSize: 30.0),
          ),
          Text(itemSub),
          Text('Sisa Item =' + qty),
          Container(
            width: 200,
            child: Text("Bahan Bahan",
                textAlign: TextAlign.left,
                style: new TextStyle(fontWeight: FontWeight.bold) // has impact
            ),
            alignment: Alignment.centerLeft,
          ),
          Row( // this is new
            children: <Widget>[
              Flexible( // this is new
                child: Text(
                  listbahanan,
                  textAlign: TextAlign.left,
                ),
              ),
              Flexible( // this is new
                child: Text(
                  listbahan2,
                  textAlign: TextAlign.right,
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

【讨论】：

当我检查我的 logcat 时，我得到了错误，错误是：A RenderFlex 在右侧溢出了 12 个像素。
那是因为我使用Padding 在两个列表之间留出空间。我已经更新了我的答案。检查它是否有效。 @Misbagas
在行中使用mainAxisAlignment: MainAxisAlignment.spaceEvenly而不是使用填充，它将在行子@Mobina之间创建空间
你是对的。它也会这样工作。我会尽快批准您的编辑。 @莫比乌斯