firebase 如何在多行中显示文本?

oipij1gg  于 2023-01-27  发布在  其他
关注(0)|答案(5)|浏览(112)

我正在研究如何在多行中显示文本。下面是我的代码:

title: Row(
                                      children: [
                                        Text(
                                            _snapshot.data['username'],
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 20,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        SizedBox(width: 5.0),
                                        Text(
                                          "${comment.data()['comment']}",
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 20,
                                              fontWeight: FontWeight.w500),
                                        )
                                      ],
                                    ),

但是当文本太长时,我会得到这个错误:

当我把第二个文本用展开的 Package 时,它看起来像这样
我想要这样的

yr9zkbsy

yr9zkbsy1#

我认为你可以尝试使用一个RichText,看下面的代码:

RichText(
      text: TextSpan(
        text: 'Title ', // _snapshot.data['username']
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        children: <TextSpan>[
          TextSpan(//"${comment.data()['comment']}"
            text: 'this is a very long text text text'
                'text text text text text text text text text text'
                'text text text text text text text text text',
            style: TextStyle(
              fontWeight: FontWeight.normal,
            ),
          )
        ],
      ),
    ),
gijlo24d

gijlo24d2#

使用“maxLines”(文本小部件)属性应该工作,它应该包裹文本。

bxfogqkk

bxfogqkk3#

这看起来像是RichText的用例,因为这两个Text小部件之间的唯一区别是字体粗细。
您可以更新代码以使用它,并在${comment.data()['comment']}之前添加所需的空间:

title: RichText(
      text: TextSpan(
        title: _snapshot.data['username'],
        style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.w700),
        children: <TextSpan>[
          TextSpan(text: "  ${comment.data()['comment']}", style: TextStyle(fontWeight: FontWeight.w500)),
        ],
      ),
    )
pw9qyyiw

pw9qyyiw4#

我用这种方式。
https://i.stack.imgur.com/6WrQi.png

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body:  ListView(
        children: const <Widget>[
          Card(
            child: ListTile(
              leading: FlutterLogo(size: 56.0),
              title: Text('Two-line ListTile Two-line ListTile Two-line ListTile'),
              subtitle: Text('Here is a second line'),
            ),
          ),
          Card(
            child: ListTile(
              leading: FlutterLogo(size: 72.0),
              title: Text('Three-line ListTile'),
              subtitle: Text(
                'A sufficiently long subtitle warrants three lines.'
              ),
              isThreeLine: true,
            ),
          ),
        ],
      ),
      ),
    );
  }
}
bsxbgnwa

bsxbgnwa5#

只需将文本小部件添加到一个固定宽度的大小框或容器中,它就会流入多行。

SizedBox(
    width: 200,
    child: Text("Some long text",
    maxLines: 3,
    style: const TextStyle(fontSize: 14, color: colorWhite))
)

您可以使用maxLineoverflow属性来控制文本可以遍历的行数,以及超过最大行数时的处理方式

相关问题