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

Posted 2023-02-23

【中文标题】滚动行为中的文本和 ListView 颤动

【英文标题】：Text and ListView in scroll behavior flutter

【发布时间】：2018-12-21 17:28:55

【问题描述】：

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

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

我尝试了 https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html 中所述的 SingleChildScrollView，但它不起作用。

截图： enter image description here

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

更新（小部件树）

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

【问题讨论】：

请同时提供您的小部件类的代码，以了解您当前的小部件树的结构。

您可以尝试在 ListView 本身中添加结果文本。例如，您只能有一个 ListView 并且对于“第 0 个”索引，您可以返回一个 Text 小部件。对于其他索引，您可以退回您的卡。

@Dhaval 零索引确实起到了作用。太好了，谢谢。但是，我想知道是否有更复杂的方法来解决这个问题。例如，如果我有一个 ListView(of cards)、一个 Text 小部件 和另一种类型的小部件，它们都在同一个页面上具有滚动交互。跨度>

【参考方案1】：

你可以试试下面给定的结构，它看起来不那么老套：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(),
            ),
          ]),
        )
      )
    );
  

【讨论】：

非常感谢，我会试一试，我会告诉你的。