时间戳

首页 > 解决方案 > 滚动行为中的文本和 ListView 颤动

flutter - 滚动行为中的文本和 ListView 颤动

问题描述

我正在尝试颤振，但遇到了一个问题。我有一个文本，其中我的结果来自服务和一个显示这些结果的 ListView（构建器）（作为卡片，以便有一个像布局一样的漂亮框）。

我的目标是，当用户滚动列表时，页面的结果部分（文本）会消失。

我按照https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html中的描述尝试了 SingleChildScrollView，但它没有用。

截图： 在此处输入图片描述

任何见解都会非常有帮助。提前致谢。

更新（小部件树）

 Widget build(BuildContext context) {
return new Scaffold(
  body: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      new Container(
        padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
        child: new RichText(
          text: new TextSpan(
            children: <TextSpan>[
              new TextSpan(
                text: this.model == null
                    ? "0"
                    : this.model.length.toString(),
                style: new TextStyle(
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              new TextSpan(
                text: ' Results',
                style: new TextStyle(
                  fontSize: 14.0,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
        ),
      ),
      new Expanded(
        child: new RefreshIndicator(
          key: refreshKey,
          child: new ListView.builder(
            itemCount: this.model?.length,
            itemBuilder: (BuildContext context, int index) {
              final Model model= this.model[index];
              return new Card(child: new Text(model.id.toString()),);
            },
          ),
          onRefresh: _handleRefresh,
        ),
      ),
    ],
  ),
);

}

标签： flutterflutter-layout

解决方案

你可以试试下面给定的结构，看起来不那么老套：p

  Widget build(BuildContext context) {
    List<String> results = List.generate(40, (int i) => "Result $i");
    return Scaffold(
        appBar: AppBar(title: Text("Test Screen")),
        body: SingleChildScrollView(
         child: Container(
           width: double.infinity,
          child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
            Text("RESULTS", style: TextStyle(fontWeight: FontWeight.bold)),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: results.map((String s) => Container(
                width: double.maxFinite,
                child: Card(child:Text(s)))).toList(),
            ),
          ]),
        )
      )
    );
  }

推荐阅读