如何使用Vaadin显示大量文本？

我需要处理一些数据并在网页上显示处理日志。（大约300行文字）
我试着用标签。起初，它工作得很好——页面可以滚动，所有文本都可以看到。但在大约100个标签之后，页面变得毫无反应
如何管理此任务

---

（我试图在webcomponents.org上查找其他一些组件，但什么也找不到。）

您可以将所有文本放在一个组件中，而不是为每行创建单独的组件。如果要将文本中的换行符（即

\n

）换行到下一行，可以将元素的

空白

CSS属性调整为，例如

换行前

或

换行前

。您可以使用

component.getElement（）.getStyle（）.set（“空白”、“预包装”）

来完成此操作

如果要直观地指示文本的状态，另一种选择可能是只读

TextArea

组件

---

我还建议在Vaadin 10中使用

Span

组件而不是

Label

Label

使用浏览器中的

元素，该元素实际上仅用于标记输入字段，而不用于文本的通用卡盘。

您可以将所有文本仅放在一个组件中，而不是为每行创建单独的组件。如果要将文本中的换行符（即

\n

）换行到下一行，可以将元素的

空白

CSS属性调整为，例如

换行前

或

换行前

。您可以使用

component.getElement（）.getStyle（）.set（“空白”、“预包装”）

来完成此操作

如果要直观地指示文本的状态，另一种选择可能是只读

TextArea

组件

我还建议在Vaadin 10中使用

Span

组件而不是

Label

Label

使用浏览器中的

元素，该元素实际上仅用于标记输入字段，而不用于文本的通用卡盘。

TextArea

我尝试了中提到的方法之一，使用

当我预加载300条短线时，没有问题。单击一个按钮一次再添加10行操作不会出现问题。使用web浏览器的窗口滚动条向上和向下滚动可以顺利进行

我在macOS High Sierra上的Safari 11.1.2浏览器中使用了Vaadin 10.0.4和Java 10.0.1（），该浏览器安装在连接到MacBook Pro视网膜的外部4K显示器上

这是整个Vaadin应用程序

package com.basilbourque.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

import java.time.Instant;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.stream.Collectors;

/**
 * The main view contains a button and a template element.
 */
@HtmlImport ( "styles/shared-styles.html" )
@Route ( "" )
public class MainView extends VerticalLayout {
    TextArea textArea;

    // Constructor.
    public MainView () {
        this.setWidth( "100%" );

        this.textArea = new TextArea( "Logs" );
        this.textArea.setWidth( "100%" );
        this.textArea.setReadOnly( true );
        this.appendRows( 300 );

        Button button = new Button( "Add 10 more rows" , event -> {
            this.appendRows( 10 );
        } );

        this.add( button , this.textArea );
        this.setClassName( "main-layout" );
    }

    private void appendRows ( int countRows ) {
        List< String > entries = new ArrayList<>( countRows );
        for ( int i = 1 ; i <= countRows ; i++ ) {
            entries.add( Instant.now().toString() );
        }
        Collections.reverse( entries ); // Put newest on top.
        String s = entries.stream().collect( Collectors.joining( "\n" ) );
        textArea.setValue( s + "\n" + this.textArea.getValue() );
    }
}

package com.basilbourque.example；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.dependency.HtmlImport；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.component.textfield.TextArea；
导入com.vaadin.flow.router.Route；
导入java.time.Instant；
导入java.util.ArrayList；
导入java.util.Collections；
导入java.util.List；
导入java.util.stream.collector；
/**
*主视图包含一个按钮和一个模板元素。
*/
@HtmlImport（“styles/shared styles.html”）
@路线（“”）
公共类主视图扩展了垂直布局{
text区域text区域；
//构造器。
公共主视图（）{
此.setWidth（“100%”）；
this.textArea=新的textArea（“日志”）；
这个.textArea.setWidth（“100%”）；
this.textArea.setReadOnly（true）；
本表为附录行（300）；
Button Button=新建按钮（“再添加10行”，事件->{
本附录第（10）行；
} );
this.add（按钮，this.textArea）；
此.setClassName（“主布局”）；
}
私有void appendRows（int countRows）{
Listentries=newarraylist（countRows）；
对于（int i=1；i
TextArea
我尝试了中提到的方法之一，使用

当我预加载300条短线时，没问题。单击一个按钮一次添加10条线可以顺利完成。使用web浏览器的窗口滚动条上下滚动可以顺利完成

我在macOS High Sierra上的Safari 11.1.2浏览器中使用了Vaadin 10.0.4和Java 10.0.1（），该浏览器安装在连接到MacBook Pro视网膜的外部4K显示器上

这是整个Vaadin应用程序

package com.basilbourque.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

import java.time.Instant;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.stream.Collectors;

/**
 * The main view contains a button and a template element.
 */
@HtmlImport ( "styles/shared-styles.html" )
@Route ( "" )
public class MainView extends VerticalLayout {
    TextArea textArea;

    // Constructor.
    public MainView () {
        this.setWidth( "100%" );

        this.textArea = new TextArea( "Logs" );
        this.textArea.setWidth( "100%" );
        this.textArea.setReadOnly( true );
        this.appendRows( 300 );

        Button button = new Button( "Add 10 more rows" , event -> {
            this.appendRows( 10 );
        } );

        this.add( button , this.textArea );
        this.setClassName( "main-layout" );
    }

    private void appendRows ( int countRows ) {
        List< String > entries = new ArrayList<>( countRows );
        for ( int i = 1 ; i <= countRows ; i++ ) {
            entries.add( Instant.now().toString() );
        }
        Collections.reverse( entries ); // Put newest on top.
        String s = entries.stream().collect( Collectors.joining( "\n" ) );
        textArea.setValue( s + "\n" + this.textArea.getValue() );
    }
}

package com.basilbourque.example；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.dependency.HtmlImport；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.component.textfield.TextArea；
导入com.vaadin.flow.router.Route；
导入java.time.Instant；
导入java.util.ArrayList；
导入java.util.Collections；
导入java.util.List；
导入java.util.stream.collector；
/**
*主视图包含一个按钮和一个模板元素。
*/
@HtmlImport（“styles/shared styles.html”）
@路线（“”）
公共类主视图扩展了垂直布局{
text区域text区域；
//构造器。
公共主视图（）{
此.setWidth（“100%”）；
this.textArea=新的textArea（“日志”）；
这个.textArea.setWidth（“100%”）；
this.textArea.setReadOnly（true）；
本表为附录行（300）；
Button Button=新建按钮（“再添加10行”，事件->{
本附录第（10）行；
} );
this.add（按钮，this.textArea）；
此.setClassName（“主布局”）；
}
私有void appendRows（int countRows）{
Listentries=newarraylist（countRows）；
对于（int i=1；我已尝试使用TextArea？@btreport No，因为我找不到一种方法将文本附加到TextArea并执行
TextArea.setValue（TextArea.getValue（）+newLineOfText）；
对于我来说，300次似乎不是一个好的解决方案。不太确定，但如果你考虑DOM，这就是双向绑定的工作方式，那么当值更新时，你会更新DOM上的一个元素。你尝试过使用TextArea吗？@btreport否，因为我不能