如何使Flutter中的可滚动文本? [英] How to make Scrollable text in flutter?

问题描述

在Column小部件的顶部有一个图像，之后是标题，即Text小部件，此后，又有一个Text小部件，其中包含一些说明，并且超出了屏幕并给出了渲染错误./p>

因此，我想使该文本视图可滚动，以便它也应该完全可见且可滚动.并且其大小必须动态，因为数据来自API.我尝试了很少的方法，但无法完成.这是屏幕截图

屏幕截图:

  @override窗口小部件build(BuildContext context){var size = MediaQuery.of(上下文).尺寸;最后的double itemHeight =(size.height-kToolbarHeight-24)/2;最后的double itemWidth = size.width;返回新的容器(子级:新列(crossAxisAlignment:CrossAxisAlignment.start，子代:< Widget> [新填充(填充:const EdgeInsets.fromLTRB(0.0，24.0，0.0，0.0)，子:new Image.asset('assets/img/noconnection.png'，高度:200.0，宽度:itemWidth，)，)，新填充(填充:const EdgeInsets.all(12.0)，子:new Text(某些标题文字"，样式:新的TextStyle(fontSize:28.0，颜色:Colors.black87，fontWeight:FontWeight.w600)，)，)，新的SingleChildScrollView(子:new Text(文本格式的说明太长(此处的数据来自API)"，样式:新的TextStyle(fontSize:16.0，color:Colors.black87，)，)，)，]，)，); 

}

解决方案

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

  import'package:flutter/material.dart';void main()=>runApp(new MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回新的MaterialApp(标题:"Flutter演示"，主题:新ThemeData(primarySwatch:Colors.blue，)，主页:new MyHomePage()，);}}类MyHomePage扩展了StatelessWidget {@override窗口小部件build(BuildContext context){var size = MediaQuery.of(上下文).尺寸;最后的double itemHeight =(size.height-kToolbarHeight-24)/2;最后的double itemWidth = size.width;返回新的容器(子级:新列(crossAxisAlignment:CrossAxisAlignment.start，子代:< Widget> [新填充(填充:const EdgeInsets.fromLTRB(0.0，24.0，0.0，0.0)，子:new Image.asset('assets/rp1.jpg'，高度:200.0，宽度:itemWidth，)，)，新填充(填充:const EdgeInsets.all(12.0)，子:new Text(某些标题文本"，样式:新的TextStyle(fontSize:28.0，颜色:Colors.white，fontWeight:FontWeight.w600)，)，)，新扩展(弹性:1，子级:new SingleChildScrollView(scrollDirection:Axis.vertical，//.horizo​​ntal子:new Text(< 1文本格式太长的描述(此处数据来自API)jdlksaf j klkjjflkdsjfkddfdfsdfds+< 2；文本格式太长的描述(这里数据来自API)d fsdfdsfsdfd dfdsfdsf sdfdsfsd d+"3文本格式太长的描述(此处数据来自API)adfsfdsfdfsdfdsf dsf dfd fds fs"+"4文本格式太长的描述(此处数据来自API)dsaf dsafdfdfsd dfdsfsda fdas dsad"+"5文本格式太长的描述(此处数据来自API)dsfdsfd fdsfds fds fdsf dsfds fds+"6文本格式太长的描述(此处数据来自API)asdfsdfdsf fsdf sdfsdfdsf sd dfdsf"+"7文本格式太长的描述(此处数据来自API)df dsfdsfdsfdsfdsfds df dsfds fds fsd"+"8文本格式太长的描述(此处数据来自API)"+"9文本格式太长的描述(此处数据来自API)"+"10文本格式太长的描述(此处数据来自API)"，样式:新的TextStyle(fontSize:16.0，颜色:Colors.white，)，)，)，)，]，)，);}} 

I have an image at the top of a Column widget after that there is heading which is Text widget and after that, there is one more Text widget which contains some description and that exceeds the screen and gives an error of rendering.

So I want to make that text view scrollable, so that it should be visible completely and scrollable too. And its size must be dynamic as the Data coming from API. I tried few of the approaches but unable to make it done. Here is the screenshot

Screenshot:

@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,
          ),
        ),
      ),
    ],
  ),
);

}

解决方案

You need to wrap your SingleChildScrollView in an Expanded widget and you will get what you are looking for.

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

这篇关于如何使Flutter中的可滚动文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！