Question

我正在使用Listview以类似聊天的布局显示消息（类似于chat template），但是在输入回复时Listview滚动到第一行时遇到了问题。

这是我的布局

<StackLayout>
       <ListView height="90%" class="list-group" items="{{ countries }}"
            itemTap="{{ onItemTap }}">
            <ListView.itemTemplate>
                <FlexboxLayout flexDirection="row" class="list-group-item">
                    <Image src="{{ imageSrc }}" class="thumb img-circle" />
                    <Label text="{{ name }}" class="list-group-item-heading"
                        verticalAlignment="center" style="width: 60%" />
                </FlexboxLayout>
            </ListView.itemTemplate>
        </ListView>
        <StackLayout height="10%" backgroundColor="red">
            <GridLayout rows="auto" columns="*" class="m-l-15 m-r-15 m-t-10">
                <TextField row="0" col="0" class="p-10"
                    hint="Enter your message" returnKeyType="done" />
            </GridLayout>
        </StackLayout>
</StackLayout>

我创建了一个playground example here来说明问题。

当您单击文本字段以添加您的答复时，键盘将向上推列表视图，因此第一行将不再可见。如何使列表视图的高度成比例地减小，以便在输入回复时可以看到前几行？

Answer 1

我已经为您here更新了游乐场。

要使列表视图的顶部始终可见，您需要为backward_stepwise<-function(x, y){ repeat{ arima_result<-auto_arima(x) arima_pvals<-p_calc(arima_result) arima_outputs<-run_outputs(arima_result, arima_pvals) arima_ranked<-rank_pval(arima_outputs) remove_num_one<-remove_one(arima_ranked) x<-cond_select(x = y, y = remove_num_one) if(min(arima_ranked$rank, na.rm = TRUE) != 1){ break } } return(arima_ranked) }中的行设置动态高度。您可以在TextField的点击和模糊事件中使用行高播放。

GridLayout

并在您的home-view-model.js

中

<GridLayout rows="{{rowHeight}}">

P.S您可能希望根据不同的屏幕来计算键盘大小。这与ios相同

onFocus: function (args) {
  this.rowHeight = "100,100";
},
onBlur: function (args) {
  this.rowHeight = "500,100";
},

在聊天版式中使用Listview

1 个答案: