Flutter – 可滚动文本

在本文中，我们将制作一个Flutter应用程序，我们将在其中添加一个可以水平或垂直滚动的Text Widget 。根据用户的需要，这些可以具有广泛的应用。在这里，我们将实现最简单的可滚动文本形式。

我们可以使用这两个小部件使文本在flutter可滚动：

• 扩展类：一个小部件，扩展行，列的孩子，或Flex使孩子充满了可用空间。
• SingleChildScrollView 类：可以在其中滚动单个小部件的框。

我们必须将Text小部件包装在SingleChildScrollView 小部件中，并进一步将SingleChildScrollView 小部件包装在Expanded 小部件中，如下所示：

Expanded(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(
              "GeeksForGeeks : Learn Anything, Anywhere",
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
          ),
        );

现在让我们看一些例子：

示例 1：水平滚动

按照以下步骤在 Text Widget 中实现水平滚动：

第一步：在Android Studio中新建一个flutter项目。

第 2 步：使用小部件进行布局

转到主要。 dart文件并参考以下代码。下面是主要的代码。dart文件。

Dart

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出：

示例 2：垂直滚动

对于文本的垂直滚动，请按照第一个示例的步骤 1 和步骤 2 并将滚动方向更改为垂直，如下所示：

scrollDirection: Axis.vertical

主要的。dart文件

Dart

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),
          
        // height should be fixed for vertical scrolling
        height: 80.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(
            
          // SingleChildScrollView contains a
          // single child which is scrollable
          child: SingleChildScrollView(
              
            // for Vertical scrolling
            scrollDirection: Axis.vertical,
            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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！