ฉันจะทำตัวหนา (หรือจัดรูปแบบ) ข้อความภายในย่อหน้าได้อย่างไร


คำตอบ:


202

คุณควรใช้วิดเจ็ตRichText

วิดเจ็ต RichText จะใช้ในวิดเจ็ตTextSpanที่สามารถมีรายการเด็ก TextSpans

แต่ละ TextSpan เครื่องมือที่สามารถมีความแตกต่างกันtextstyle

นี่คือตัวอย่างโค้ดในการแสดงผล: Hello World

var text = new RichText(
  text: new TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: new TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

26

[อัปเดต]

คำตอบด้านล่างนี้เหมาะที่สุดสำหรับคำสองสามคำและไม่ใช่สำหรับย่อหน้าหากคุณมีประโยคยาว ๆ หรือย่อหน้าที่คุณต้องการจัดรูปแบบข้อความโดยเฉพาะให้ใช้ RichText ตามที่ @DvdWasibi แนะนำในคำตอบด้านบน

[คำตอบเก่า]

ฉันชอบการเก็บรักษาสั้นรหัสของฉันและทำความสะอาดนี้เป็นวิธีที่ฉันจะทำเพิ่มสองช่องข้อความในหนึ่งแถวที่มีตัวอักษรปกติและอีกตัวหนา ,

หมายเหตุ: สิ่งนี้อาจดูไม่ดีสำหรับย่อหน้ายาวที่ดูดีสำหรับ Headlines เป็นต้น

Row(children: <Widget>[
      Text("Hello"),
      Text("World", style: TextStyle(fontWeight: FontWeight.bold))
    ])
`

และคุณควรได้ผลลัพธ์ที่ต้องการเป็น "Hello World "


8
นี่ไม่ใช่ความคิดที่ดีหากคุณจะมีข้อความย่อหน้า แต่ละข้อความ () ภายในแถวจะสร้างช่องว่างแนวตั้ง / แนวนอนของตนเอง
มูฮัมหมัดอาดิล

แล้วทางเลือกในการใช้ Row คืออะไร? และถ้าฉันต้องการข้อความเคียงข้างกันด้วยการจัดรูปแบบที่แตกต่างกัน
maheshmnj

2
ดูคำตอบข้างต้นจาก @Dvdwasibi เพียงลองใช้งานของคุณด้วยย่อหน้าขนาดใหญ่และคุณจะพบสองย่อหน้าที่แตกต่างกัน คำตอบของคุณถูกต้องสำหรับ 2/3 คำ แต่ไม่ใช่สำหรับย่อหน้า
Muhammad Adil

10
return RichText(
  text: TextSpan(
    text: 'Can you ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'find the',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
        ),
        recognizer: _longPressRecognizer,
      ),
      TextSpan(text: 'secret?'),
    ],
  ),
);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.