วิธีการขีดเส้นใต้ข้อความในการกระพือ

วิธีการขีดเส้นใต้ข้อความในกระพือภายในTextวิดเจ็ต?

ดูเหมือนว่าฉันไม่สามารถขีดเส้นใต้fontStyleคุณสมบัติภายในของTextStyle

เมื่อขีดเส้นใต้ทุกสิ่งคุณสามารถตั้งค่า TextStyle บนวิดเจ็ตข้อความ

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

หากคุณต้องการขีดเส้นใต้เฉพาะส่วนของข้อความคุณต้องใช้Text.rich()(หรือวิดเจ็ต RichText) และแบ่งสตริงออกเป็น TextSpans ที่คุณสามารถเพิ่มสไตล์ได้

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan แปลกนิดหน่อย textพารามิเตอร์เป็นรูปแบบเริ่มต้น แต่childrenรายการมีสไตล์ (และอาจ Unstyled) ข้อความที่ปฏิบัติตามมัน คุณสามารถใช้สตริงว่างtextหากคุณต้องการเริ่มต้นด้วยข้อความที่มีสไตล์

คุณยังสามารถเพิ่ม TextDecorationStyle เพื่อเปลี่ยนลักษณะการตกแต่งได้อีกด้วย นี่คือเส้นประ:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

และTextDecorationStyle.dotted:

และTextDecorationStyle.double:

และTextDecorationStyle.wavy:

คุณทำได้โดยสมัครdecoration: TextDecoration.underlineกับTextStyleไฟล์Text.

ด้วยตัวอย่างธีม:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

ตัวอย่างพื้นฐาน:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

คุณสามารถใช้ TextDecoration อย่างมีสไตล์เพื่อขีดเส้นใต้ข้อความที่กำหนด

ตัวอย่างเช่น

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

วิธีแก้ปัญหาที่น่าตื่นเต้น
หากคุณต้องการควบคุมระยะห่างระหว่างข้อความและขีดเส้นใต้คุณสามารถใช้แฮ็คนี้ ในระยะสั้นคุณซ่อนข้อความจริงโดยใช้ Colors.transparent จากนั้นแสดงเงาออฟเซ็ตที่วางอยู่เหนือขีดเส้นใต้ข้อความ

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

ดังที่คุณจะเห็นด้านล่างหากคุณใช้ขีดเส้นใต้ข้อความที่ไม่อยู่ในกรอบข้อความนั้นจะติดอยู่ที่ด้านล่างของข้อความและอาจดูน่าเกลียดเล็กน้อย

โซลูชั่นที่น่าเบื่อ

ใช้เพียงวิดเจ็ตข้อความคุณสามารถเพิ่มขีดเส้นใต้ด้วยสไตล์และสีที่กำหนดเอง:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

ปัญหาเดียวที่ฉันมีกับวิธีนี้คือคุณไม่สามารถควบคุมว่าขีดเส้นใต้จะอยู่ด้านล่างสุดของข้อความได้อย่างไร

หากคุณต้องการเพิ่มระยะห่างคุณจะต้องใช้วิธีการที่แปลกใหม่ซึ่งใช้คอนเทนเนอร์และคุณสมบัติการขยาย

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

จับตาดูปัญหา GitHub นี้เพื่อหาวิธีแก้ปัญหาที่ง่ายกว่า

ตัวอย่างเช่น

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),