如何在颤动中制作可滚动的文本？

Question

我在 Column 小部件的顶部有一个图像，之后有一个标题是 Text 小部件，之后，还有一个 Text 小部件包含一些描述并且超出了屏幕并给出了呈现错误。

所以我想让那个文本视图可以滚动，这样它就应该完全可见并且也可以滚动。并且它的大小必须是动态的，因为来自 API 的数据。 我尝试了几种方法，但无法完成。 这是截图

截图：

@override


 Widget build(BuildContext context) {
    var size = MediaQuery
        .of(context)
        .size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width;


return new Container(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Padding(
        padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        child: new Image.asset(
          'assets/img/noconnection.png',
          height: 200.0,
          width: itemWidth,
        ),
      ),
      new Padding(
        padding: const EdgeInsets.all(12.0),
        child: new Text(
          "Some Heading Text",
          style: new TextStyle(
              fontSize: 28.0,
              color: Colors.black87,
              fontWeight: FontWeight.w600),
        ),
      ),
      new SingleChildScrollView(
        child: new Text(
          "Description that is too long in text format(Here Data is coming from API)",
          style: new TextStyle(
            fontSize: 16.0, color: Colors.black87,
          ),
        ),
      ),
    ],
  ),
);

}

Answer 1

您需要将 SingleChildScrollView 包装在 Expanded 小部件中，您将获得所需的内容。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery
        .of(context)
        .size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width;

    return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
            child: new Image.asset(
              'assets/rp1.jpg',
              height: 200.0,
              width: itemWidth,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.all(12.0),
            child: new Text(
              "Some Heading Text",
              style: new TextStyle(
                  fontSize: 28.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w600),
            ),
          ),
          new Expanded(
            flex: 1,
            child: new SingleChildScrollView(
              scrollDirection: Axis.vertical,//.horizontal
              child: new Text(
                "1 Description that is too long in text format(Here Data is coming from API) jdlksaf j klkjjflkdsjfkddfdfsdfds " + 
                "2 Description that is too long in text format(Here Data is coming from API) d fsdfdsfsdfd dfdsfdsf sdfdsfsd d " + 
                "3 Description that is too long in text format(Here Data is coming from API)  adfsfdsfdfsdfdsf   dsf dfd fds fs" + 
                "4 Description that is too long in text format(Here Data is coming from API) dsaf dsafdfdfsd dfdsfsda fdas dsad" + 
                "5 Description that is too long in text format(Here Data is coming from API) dsfdsfd fdsfds fds fdsf dsfds fds " + 
                "6 Description that is too long in text format(Here Data is coming from API) asdfsdfdsf fsdf sdfsdfdsf sd dfdsf" + 
                "7 Description that is too long in text format(Here Data is coming from API) df dsfdsfdsfdsfds df dsfds fds fsd" + 
                "8 Description that is too long in text format(Here Data is coming from API)" + 
                "9 Description that is too long in text format(Here Data is coming from API)" + 
                "10 Description that is too long in text format(Here Data is coming from API)",     
                style: new TextStyle(
                  fontSize: 16.0, color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

如果您想触摸屏幕的任何部分并能够滚动，请使用此示例。 我使用黄色和绿色来表示整个屏幕会滚动，而不仅仅是文本区域。

import 'package:flutter/material.dart';

class ShowFilePage extends StatefulWidget {
  @override
  _ShowFilePageState createState() => _ShowFilePageState();
}

class _ShowFilePageState extends State<ShowFilePage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(
          title: Text('Text'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
                child: Container(
                    color: Colors.green,
                    child: SingleChildScrollView(child: Text('insert long text here')))),
          ],
        ));
  }
}

Answer 3

对于垂直和水平滚动文本，我使用了以下代码。

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Text('Your text.......')
    ),
  );

Answer 4

为简单起见，只需使用 3rd pub：Marquee

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

Answer 5

只需将根容器放在 SingleChildScrollView() 小部件中即可。

SingleChildScrollView(
  child: Container() // your root container
)