Flutter中的水平滚动文本

Question

我正在尝试在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中是我能想到的最简单的解决此问题的方法，所以我没有其他想法。

- Kantine

---

你的代码运行良好，而且还可以滚动。 - Diwyansh

Answer 1

这个问题是由于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,
            ),
          ),
        ),
      ),
    );
  }
}

- Yeasin Sheikh

Answer 2

首先，为了让Flutter检测到滚动区域中的项目，您现在必须使用ListView。添加一个listview小部件，在其中放置文本或其他小部件，Flutter将完美地检测到您的滚动小部件。

在ListView小部件中有一个属性叫做scrollDirection:，您可以将其值设置为Axis.horizontal，这样就能实现横向滚动了。

更多信息请参阅：如何在Flutter中创建水平列表 提示：避免在学习Flutter时随意访问geeksforgeeks，我已经吃过亏了。

- raiyan22