水平滚动文本颤动

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.horizo​​ntal,这样就可以了。

如需更多参考资料,请查看: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,
            ),
          ),
        ),
      ),
    );
  



【讨论】:

以上是关于水平滚动文本颤动的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动中自动滚动文本?

滚动行为中的文本和 ListView 颤动

页面视图滚动上的颤动文本动画

如何在颤动中使我的文本与 listview.builder 一起滚动

Flutter web:如何以步进形式进行水平滚动?

颤动旋转的文本未填充可用空间