堆栈内存溢出
  简体   繁体   English

如何在 Flutter 中处理此文本小部件？

[英]How do I handle this Text widget in Flutter?

 原文  2020-04-21 19:42:36  1   2    flutter/ text/ widget

问题描述

I have a function that returns an AlertDialog.我有一个返回 AlertDialog 的 function。 Here's a screenshot of what it looks like: https://i.stack.imgur.com/ZPVFI.jpg .这是它的截图： https://i.stack.imgur.com/ZPVFI.jpg 。 And here's the code for it:这是它的代码：

void _showDialog(BuildContext context, List details) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        titlePadding: const EdgeInsets.all(5),
        contentPadding: const EdgeInsets.only(left: 10, right: 10),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))
        ), 
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              details[3].toString(),
              style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
            ),
          ] 
        ),
        content: Container(
          color: Colors.green,
          width: double.infinity,
          height: 150,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    'Data: ',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  ),
                  Text(
                    details[0],
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Text(
                    'Tipologia: ',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  ),
                  Text(
                    details[2].toLowerCase(),
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
                  ),
                ],
              ),
              details[5] != ''
              ? Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Descrizione: ',
                        style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                      ),
                    ],
                  ),
                  Container(
                    //width: 100,
                    child: Text(
                      details[5],
                      style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 5,
                      textAlign: TextAlign.justify,
                    ),
                  )
                ],
              )
              : Offstage(
                child: Text('invisible')
              ),
              Row(
                children: <Widget>[
                  details[4] == 'SI'
                  ? Text(
                    'Il voto fa media.',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  )
                  : Text(
                    'Il voto non fa media.',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  )
                ],
              ),
            ],
          ),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text(
              "Chiudi",
              style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
            ),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

The rows containing "Data" and "Tipologia" are no issue.包含“Data”和“Tipologia”的行没有问题。 But after "Descrizione" there's a Text widget that contains a string of variable length.但是在“Descrizione”之后有一个包含可变长度字符串的文本小部件。 I'd like said text to be displayed on multiple lines, starting right after "Descrizione: " (just like "pratico" starts right after "Tipologia: ").我希望将所述文本显示在多行上，从“Descrizione：”之后开始（就像“pratico”在“Tipologia：”之后开始）。 How do I do it?我该怎么做？ Edit: here's how it looks like now https://i.stack.imgur.com/fKajB.jpg编辑：这是现在的样子https://i.stack.imgur.com/fKajB.jpg

2 个解决方案

解决方案1
 1 已采纳  2020-04-22 02:10:52

I'd suggest you go with RichText() instead of Row() with Texts我建议您使用带有RichText()的 go 而不是带有Texts的Row()
Just Like What follows就像下面的一样

RichText(
                    textAlign: TextAlign.left,
                    text: TextSpan(
                      children: [
                        TextSpan(children: [
                          TextSpan(
                              text: 'Descrizione: ',
                        style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
                          TextSpan(
                            text: details[5],
                      style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
                          ),
                        ]),
                      ],
                    ),

so your code should look like所以你的代码应该看起来像

void _showDialog(BuildContext context, List details) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        titlePadding: const EdgeInsets.all(5),
        contentPadding: const EdgeInsets.only(left: 10, right: 10),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))
        ), 
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              details[3].toString(),
              style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
            ),
          ] 
        ),
        content: Container(
          color: Colors.green,
          width: double.infinity,
          height: 150,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    'Data: ',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  ),
                  Text(
                    details[0],
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Text(
                    'Tipologia: ',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  ),
                  Text(
                    details[2].toLowerCase(),
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
                  ),
                ],
              ),
              details[5] != ''
              ? Column(
                children: <Widget>[
                  RichText(
                    textAlign: TextAlign.left,
                    text: TextSpan(
                      children: [
                        TextSpan(children: [
                          TextSpan(
                              text: 'Descrizione: ',
                        style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
                          TextSpan(
                            text: details[5],
                      style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
                          ),
                        ]),
                      ],
                    )
              : Offstage(
                child: Text('invisible')
              ),
              Row(
                children: <Widget>[
                  details[4] == 'SI'
                  ? Text(
                    'Il voto fa media.',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  )
                  : Text(
                    'Il voto non fa media.',
                    style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
                  )
                ],
              ),
            ],
          ),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text(
              "Chiudi",
              style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
            ),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

解决方案2
 0  2020-04-22 02:36:58

All you have to do is make a couple simple changes to your code您所要做的就是对您的代码进行一些简单的更改

details[5] != ''
                            ? Container(
                                width: double.infinity,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment
                                      .start, // This will change how the multi-line text is aligned
                                  children: <Widget>[
                                    Text(
                                      'Descrizione: ',
                                      style: test.GoogleFonts.quicksand(
                                          color: Colors.black,
                                          fontSize: 20,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Flexible(
                                      child: Text(
                                        details[5],
                                        style: test.GoogleFonts.quicksand(
                                            color: Colors.black, fontSize: 20),
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 5,
                                        textAlign: TextAlign.justify,
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            : Offstage(child: Text('invisible')),

Let me know if you need anything else需要帮助请叫我

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用颤振文本小部件进行文本换行？ - How do I text wrap with flutter text widget? 如何在Flutter窗口小部件中临时更改文本颜色（反过来）？ - How do I temporarily change a text color (and back) in a Flutter widget? 如何在 Flutter 中限制文本小部件中的字数？ - How do I limit the number of words in a Text Widget in Flutter? 如何在 Flutter 的一行内对齐 TextFormField 和文本小部件？ - How do I align a TextFormField and Text widget inside a row in Flutter? Flutter 如何从 Text 小部件中删除不需要的填充？ - Flutter how do I remove unwanted padding from Text widget? 如何更改 Flutter 中 iOS 的文本选择句柄颜色？ - How do I change text selection handle color for iOS in Flutter? 我该如何处理动态列表 <DataColumn> 小部件，以避免Flutter DataTable小部件中的RenderFlex异常？ - How do I handle dynamic list of <DataColumn> Widgets to avoid RenderFlex exceptions in Flutter DataTable Widget? 如何处理 flutter 中小部件的唯一性？ - How to handle the uniqueness of widget in flutter? 如何在 Flutter 中围绕图像小部件浮动文本小部件 - How can I float Text Widget around an Image Widget in Flutter 如何禁用 Flutter 中的任何小部件？ - How do I disable any widget in Flutter?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM