Làm thế nào để gạch dưới văn bản bị rung

Làm thế nào để gạch dưới văn bản trong phần rung bên trong Textwidget?

Tôi dường như không thể tìm thấy gạch chân bên trong fontStyletài sản củaTextStyle

Khi gạch dưới mọi thứ, bạn có thể đặt TextStyle trên tiện ích Text.

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

Nếu bạn chỉ muốn gạch dưới một phần của văn bản thì bạn cần sử dụng Text.rich()(hoặc tiện ích RichText) và ngắt chuỗi thành TextSpans mà bạn có thể thêm kiểu vào.

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 hơi lạ. Các texttham số là kiểu mặc định nhưng childrendanh sách chứa các văn bản theo kiểu (và có thể unstyled) mà theo nó. Bạn có thể sử dụng một chuỗi trống textnếu bạn muốn bắt đầu với văn bản được tạo kiểu.

Bạn cũng có thể thêm TextDecorationStyle để thay đổi cách trang trí. Đây là dấu gạch ngang:

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

và TextDecorationStyle.dotted:

và TextDecorationStyle.double:

và TextDecorationStyle.wavy:

Bạn làm điều đó bằng cách áp dụng decoration: TextDecoration.underlinecho TextStylea Text.

Với ví dụ Chủ đề:

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

Ví dụ cơ bản:

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

Bạn có thể sử dụng TextDecoration theo kiểu để gạch dưới một văn bản nhất định.

Ví dụ

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

ví dụ

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

Giải pháp thú vị
Nếu bạn muốn kiểm soát khoảng cách giữa văn bản và gạch dưới, bạn có thể sử dụng hack này. Tóm lại, bạn ẩn văn bản thực bằng cách sử dụng Colors.transparent và sau đó hiển thị một bóng bù di chuột phía trên gạch dưới Văn bản.

        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,
            ),
          )

Như bạn sẽ thấy bên dưới, nếu bạn sử dụng gạch dưới Văn bản ngoài hộp, nó sẽ dính vào cuối văn bản và có thể trông hơi xấu,

Giải pháp nhàm chán

Chỉ sử dụng tiện ích Văn bản, bạn có thể thêm gạch dưới với kiểu và màu tùy chỉnh:

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

Vấn đề duy nhất mà tôi gặp phải với cách tiếp cận này là bạn không thể kiểm soát được mức độ gần của gạch chân với cuối văn bản.

Nếu bạn muốn tăng khoảng cách, bạn sẽ phải sử dụng một cách tiếp cận độc đáo sử dụng Container và thuộc tính padding.

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,
        ),
       ),
      )

Hãy theo dõi vấn đề GitHub này để có giải pháp đơn giản hơn.