Flutter文本的对齐和包装方式

huangapple go评论86阅读模式
英文:

Flutter alignement and wrap of different texts

问题

这是我想要实现的模型!

我联系你是因为我想复制《Libération》报纸的应用程序,但我卡住了(已经!)在标题的问题上。

我附上了一个视觉示例,我会尽量清楚地说明。我希望标题的第一部分是红色的,然后标题继续是黑色的,再次对齐左边,位于红色标题的下方。我尝试了许多方法,但都没有成功。Expanded、Wrap... 要么文本溢出,要么当我设法使黑色文本换行时,它定位在黑色文本下方,而不是红色文本下方,考虑到块从红色块的右侧开始。

我尝试了Wrap、Row、Expanded。

谢谢 Flutter文本的对齐和包装方式

英文:

This is the model of what i want to do !

I'm contacting you because I'm trying to copy the Libération newspaper application but I'm stuck (already!) on the question of the title.

I have attached a visual and I will try to be clear. I would like the first part of the title to be in red and then the title to continue in black and line up again, aligned to the left, under the red title. I have tried many methods to no avail. Expanded, Wrap... either the text sticks out or, when I manage to make the line break of the black text, it is positioned under the black text, not under the red text, considering that the block starts on the right of the red block.

I tried Wrap, Row, Expanded.

Thank you Flutter文本的对齐和包装方式

答案1

得分: 0

以下是您要翻译的代码部分:

this is just an example , 
If it's dynamic you might want to use: a separator; to split the title or the text or another symbol

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  final String title =
      "Chez Pol; Et si on mesurait le bruit à l'Assemblée pour la santé des députés?";

  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SafeArea(
        child: Scaffold(
          body: RichText(
            text: TextSpan(
              text: title.split(';')[0].toString(),
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(
                  text: title.split(';')[1].toString(),
                  style: const TextStyle(color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

希望这有帮助!

英文:

this is just an example ,
If it's dynamic you might want to use: a separator; to split the title or the text or another symbol

import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  final String title =
      &quot;Chez Pol; Et si on mesurait le bruit &#224; l&#39;Assembl&#233;e pour la sant&#233; des d&#233;put&#233;s?&quot;;

  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: &#39;Flutter Demo&#39;,
      home: SafeArea(
        child: Scaffold(
          body: RichText(
            text: TextSpan(
              text: title.split(&#39;;&#39;)[0].toString(),
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
              children: &lt;TextSpan&gt;[
                TextSpan(
                  text: title.split(&#39;;&#39;)[1].toString(),
                  style: const TextStyle(color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年2月18日 18:59:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75492867.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定