Flutter Text文字下方出现黄色双下划线

源代码

class ViewDemo extends StatelessWidget {
  Widget _pageItembuilder(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl ?? '',
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title ?? "",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Colors.black,
                    decoration: TextDecoration.none),
              ),
              Text(
                posts[index].author ?? '',
                style: TextStyle(fontSize: 14),
              )
            ],
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItembuilder,
    );
  }
}

　

最近在写Flutter版本的玩Android项目的启动页的时候发现文字的下方出现了两条黄色下划线，一开始有点懵，经过了解发现是我的代码写的有些问题，现在在这里做个记录。 在Flutter中，Text组件是属于Material风格的，这就要求我们的根组件最好也是Material风格的，否则UI展示可能会有一些问题。刚刚提到的启动页，根组件直接使用的层叠布局Stack，而Stack就不属于Material风格，当Stack内部嵌套Text的时候就会出现文字下方带有两条黄色下划线的现象。

解决方法

这个问题主要有两种方式解决:
1.修改根节点的组件类型为Scaffold或者Material

Scaffold(body: content,);

Material(child: content);

2.针对出现问题的Text组件，修改其style下的decoration属性为TextDecoration.none

child: Text(
       "技术连接世界",
       style:TextStyle(color: Colors.white, decoration: TextDecoration.none),),

 

 

解答来源:https://juejin.cn/post/6933866727704887309