📜  Flutter – 可滚动文本

📅  最后修改于: 2021-09-23 06:30:33             🧑  作者: Mango

在本文中,我们将制作一个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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}


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


输出:

示例 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!