水平滚动文本颤动
Posted
技术标签:
【中文标题】水平滚动文本颤动【英文标题】:Horizontal scroll Text in flutter 【发布时间】:2022-01-16 23:33:44 【问题描述】:我正在尝试在 Flutter Web 应用程序上显示一行长文本,而不进行剪辑或省略。为此,我想让它水平滚动。我从https://www.geeksforgeeks.org/flutter-scrollable-text/找到了这段代码
import 'package:flutter/material.dart';
void main()
runApp(MaterialApp(
home: Scaffold(
//adding App Bar
appBar: AppBar(
backgroundColor: Color.fromRGBO(15, 157, 88, 1),
title: Text(
"GeeksForGeeks",
style: TextStyle(
color: Colors.white,
),
),
),
body: MyApp(),
),
));
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
// SingleChildScrollView should be
// wrapped in an Expanded Widget
child: Expanded(
//contains a single child which is scrollable
child: SingleChildScrollView(
//for horizontal scrolling
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
),
);
但这对我不起作用。文本被剪裁但不可滚动。我尝试将 overflow: TextOverflow.visible
添加到 Text 小部件,但没有结果。我没有任何其他想法,因为将 Text
包装在 SingleChildScrollView
中是我能想到的解决此问题的最简单的方法。
【问题讨论】:
您的代码运行良好,也可以滚动。 【参考方案1】:首先,为了让flutter检测滚动下的项目,你现在必须使用ListView。添加一个 listview 小部件,并在其下保留您的文本或其他小部件,并且 Flutter 将完美地检测您的滚动小部件。
在 ListView 小部件中有一个名为 scrollDirection: 的属性,您可以将值设置为 Axis.horizontal,这样就可以了。
如需更多参考资料,请查看:How to create a horizontal list in flutter
提示:避免在旅途中学习 Flutter 的 geeksforgeeks,以艰难的方式学习它
【讨论】:
【参考方案2】:由于Expanded
小部件而发生此问题。删除它,它会正常工作,
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
child: SingleChildScrollView(
//for horizontal scrolling
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
);
【讨论】:
以上是关于水平滚动文本颤动的主要内容,如果未能解决你的问题,请参考以下文章