dart Flutter无法使文本行响应

piwo6bdm 于 11个月前发布在 Flutter

关注(0)|答案(2)|浏览(84)

我正试图创建一个响应式Flutter布局，似乎超过屏幕大小。我曾试图用Flexible创建一个类似“单行”的设计，但效果不好（申请了Row，每个项目都是单独的。想法？：c
当前结果：

Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
                      child: Text(
                        provider != null
                            ? 'This account is verified because it\'s an official'
                            : 'This account is verified.',
                        style: GoogleFonts.lato(fontSize: 15),
                      ),
                    ),
                    if (provider != null) ...[
                      Row(
                        children: <Widget>[
                          Text(provider!,
                              style: GoogleFonts.lato(
                                  fontSize: 15, color: authorizationZoneColor)),
                          Text(
                            ' provider.',
                            style: GoogleFonts.lato(fontSize: 15),
                          ),
                        ],
                      )
                    ],
                    TextButton(
                      onPressed: () async {},
                      style: ButtonStyle(
                          overlayColor:
                              MaterialStateProperty.all(Colors.transparent),
                          minimumSize:
                              MaterialStateProperty.all<Size>(const Size(0, 0)),
                          padding: MaterialStateProperty.all<EdgeInsets>(
                              const EdgeInsets.all(0)),
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                      child: Text('Learn more.',
                          style: GoogleFonts.lato(
                              fontSize: 15, color: authorizationZoneColor)),
                    )
                  ],
                )

字符串

的数据
要求结果：

的

dart

来源：https://stackoverflow.com/questions/76799728/flutter-unable-to-make-responsive-text-row

2条答案

按热度按时间

ars1skjm1#

要实现这一点，您需要使用TextSpan小部件而不是Row小部件。TextSpan小部件会自动将文本小部件的内容对齐成一行。您可以将样式单独应用于每个文本小部件和按钮。

赞(0）回复(0）举报 11个月前

e0bqpujr2#

考虑使用RichText而不是Row来实现此特定目的。RichText提供了一个名为TextSpan的子部件，其中包括一个名为“recognizer”的有用属性。通过将TapGestureRecognizer分配给这个属性，您可以更有效地实现所需的功能。
范例：

ListTile(
        leading: const Icon(
          Icons.sunny,
          color: Colors.orange,
        ), // Use your own widget.
        horizontalTitleGap: 0,
        title: RichText(
          text: TextSpan(
            children: [
              const TextSpan(
                text: 'This account is verified because it\'s an official ',
                style: TextStyle(
                    color: Colors.black), // Use your own preferred style
              ),
              TextSpan(
                text: 'Latvian Government ',
                style: const TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () => print('DO SOMETHING'),
              ),
              const TextSpan(
                text: 'Provider. ',
                style: TextStyle(color: Colors.black),
              ),
              TextSpan(
                text: 'Learn more',
                style: const TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () => print('DO SOMETHING'),
              ),
            ],
          ),
        ),
      ),

字符串

赞(0）回复(0）举报 11个月前

我来回答

dart Flutter无法使文本行响应

2条答案

相关问题

热门标签

最新问答