Flutter中文本小部件下的黃線？

Question

主應用程序屏幕沒有此問題，所有文本均按應有的方式顯示。

但是，在新屏幕中，所有文本小部件下面都有一些奇怪的黃線/雙線。

關於為什么會發生這種情況的任何想法？

Answer 1

問題是有沒有Scaffold 。 Scaffold是Material應用程序（ AppBar 、 Drawer之類的）的助手。 但是您不必被迫使用Material 。

您缺少的是作為父級的DefaultTextStyle實例：

DefaultTextStyle(
  style: TextStyle(...),
  child: Text('Hello world'),
)

各種小部件添加一個以更改默認文本主題，例如 Scaffold、Dialog、AppBar、ListTile、...

例如，它是DefaultTextStyle ，它允許您的應用欄標題默認為粗體。

Answer 2

將Material小部件添加為根元素。

@override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: new Container(

Answer 3

您需要做的就是提供一個Material小部件，或者一個內部覆蓋該小部件的Scaffold 。 您可以通過以下方式做到這一點：

• 使用Material （簡單且更好）：

   Material( color: Colors.transparent, // <-- Add this, if needed child: Text('Hello'), )

• 設置Text.style屬性：

   Text( 'Hello', style: TextStyle(decoration: TextDecoration.none), // Set this )

• 提供Scaffold ：

   Scaffold(body: Text('Hello'))

---

修復使用Hero時的黃色文本問題：

正如aaronvargas 所提到的，您可以在兩側使用Hero時將您的child包裹在Material中。 例如：

Hero(
  tag: 'fooTag',
  child: Material( // <--- Provide Material
    type: MaterialType.transparency,
    child: YourWidget(),
  ),
);

Answer 4

文本樣式有一個可以設置為無的裝飾參數

Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

此外，正如其他人所提到的，如果您的 Text 小部件位於 Scaffold 或 Material 小部件的樹中，則您不需要裝飾文本樣式。

Answer 5

您也可以使用裝飾：TextDecoration.none 刪除下划線

Answer 6

只是在這些答案中添加我遇到的另一種方式。

將根 Widget 包裹在DefaultTextStyle小部件周圍。 在這里更改每個 Text 小部件不是必需的。

DefaultTextStyle(
    style: TextStyle(decoration: TextDecoration.none), 
    child : Your_RootWidget
)

希望它可以幫助某人。

Answer 7

在Text Widget ，使用style屬性並將decoration設置為null如下所示：

Text( 
   "hello world",
   style: TextStyle(
       decoration: TextDecoration.none
   ),
)

這將刪除文本下方的黃線。

Answer 8

您應該在 main.dart 文件中添加 Material 和 Scaffold 小部件

 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

Answer 9

2種方式可用：

在屏幕的父級中使用腳手架

Scaffold(body: Container(child:Text("My Text")))

使用材質作為小部件的父級

Material(child: Text("My Text"))

Answer 10

您只需要添加 Material 根小部件。

      @override
       Widget build(BuildContext context) {
      return Material(
         child: new Container(),
        );
       }

Answer 11

對此還有其他解決方案，特別是如果您使用包含在main.dart文件下的多個頁面，您可以執行以下操作：

  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

這將刪除在包裝器下引用/使用的任何頁面中存在的文本下的黃線。

Answer 12

問題：您的小部件沒有默認文本樣式，

解決方案：把它包在一個！

DefaultTextStyle(
    style: TextStyle(),
    child: yourWidget,
  );

請記住，如果您不設置任何顏色，則默認文本顏色為白色！

Answer 13

黃線來自_errorTextStyle 。 文檔說明您應該定義一個DefaultTextStyle父級（或使用Material ，它會為您執行此操作）：

MaterialApp 使用這個 TextStyle 作為它的 DefaultTextStyle 來鼓勵開發者注意他們的 DefaultTextStyle。

在 Material Design 中，大多數 Text 小部件都包含在 Material 小部件中，它設置了特定的 DefaultTextStyle。 如果您看到使用此文本樣式的文本，請考慮將您的文本放入 Material 小部件（或另一個設置 DefaultTextStyle 的小部件）中。

大多數人不會在沒有材料的情況下開發 Flutter 應用程序，但如果這是你的用例，你應該使用DefaultTextStyle 。

與接受的答案相反， Theme沒有設置DefaultTextStyle ，因此它不能解決您的問題。 Scaffold確實解決了這個問題，因為它包含Material ，它又定義了DefaultTextStyle ，但是Scaffold比你需要的Dialog 、 Hero等要多一點。

要為您的整個應用永久解決此問題，您可以在MaterialApp builder中設置DefaultTextStyle 。 這解決了應用程序所有組件的問題，而不僅僅是您正在處理的當前屏幕。

Answer 14

前

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text(
            "21:34",
            style: TextStyle(fontSize: 50),
          ),
        ),
        Center(
          child: Text(
            "Wakey - wakey",
            style: TextStyle(fontSize: 20),
          ),
        )
      ],
    );
  }

之后（解決方案）：

這里用Scaffold小部件包裹當前頂部或父小部件

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }

完整代碼： Dartpad 或 Live 代碼

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: sta()));

class sta extends StatefulWidget {
  const sta({Key? key}) : super(key: key);

  @override
  State<sta> createState() => _staState();
}

var isShow = false;


class _staState extends State<sta> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }
}

Answer 15

您還可以將腳手架作為 MaterialApp 的家。 這對我有用。

return MaterialApp(
  home: Scaffold(
    body: Container(
      child: SingleChildScrollView(child: Text('Test')),
    ),
  ),
);

Answer 16

我推薦這種方法，因為你可以這樣做一次，它會覆蓋你的整個應用程序。

在MaterialApp的builder下添加DefaultTextStyle ，如下所示：

child: MaterialApp(      
  ...
  ...
  theme: yourThemeData,
  builder: (context, child) => DefaultTextStyle(
    style: yourThemeData.textTheme.bodyText1,
    child: child,
  ),
),

通過這樣做，我們不需要在每次想要使用showDialog或Overlay時指定style或使用DefaultTextTheme 。

Answer 17

該文本具有隱藏的默認文本樣式。出現問題是因為您無法將其提供給任何父小部件，例如Scaffold 。 文本小部件采用默認樣式。 對於您的解決方案，您可以像這樣更改DefaultTextStyle 。

DefaultTextStyle(
    style: TextStyle(),
    child: yourTextWidget,
  );

或者只是包裝成 Scaffold，Scaffold 是一個小部件。 為您的應用程序中的頁面提供腳手架。 像這樣

 MaterialApp(
  home: Scaffold(
    body: Text('Wakey Wakey!'),
  ),
);

欲了解更多信息，請瀏覽這個 Flutter 官方視頻。

黃色下划線文字 | 解碼顫振

Answer 18

使用 DefaultTextStyle() 小部件來設置文本的文本樣式。

DefaultTextStyle(
  style: kTempTextStyle,
  child: Text('Hello world'),
)

您可以根據需要提供自己的文本樣式。

const kTempTextStyle = TextStyle(
  fontFamily: 'Spartan MB',
  fontSize: 100.0,
  decoration: null,
);