【问题标题】:flutter scrollable selectable text颤动可滚动的可选文本
【发布时间】:2021-10-05 10:10:08
【问题描述】:

我有一个阅读应用程序,我在其中显示大量文本。 对于性能问题,我将这些文本分成块并显示在 ListView.builder() 小部件中

当我想使用SelectableText 小部件使文本可选择时,就会出现问题。 因为文本在列表项之间拆分,所以我无法在它们之间进行选择。 基本上文本只能在列表项中选择。

解决方案是显示没有性能问题的文本以及在块或整个文本之间进行选择的能力

【问题讨论】:

    标签: flutter


    【解决方案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,
                ),
              ),
            ),
          ),
        ],
        ),
      );
     }
     }
    

    【讨论】:

    • 然后当文本长度为 5000 个字符时,它开始在滚动时卡顿,因为单个子滚动视图将呈现所有 5000 个字符
    • 您可以为容器指定特定高度,但它不会:-)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-22
    • 2020-02-14
    • 2022-01-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多