ListView 包含一个多行文本字段，后跟 Flutter 中的 ListTiles

Posted 2023-02-23

【中文标题】ListView 包含一个多行文本字段，后跟 Flutter 中的 ListTiles

【英文标题】：ListView containing a multiline Textfield followed by ListTiles in flutter

【发布时间】：2021-10-26 19:08:04

【问题描述】：

目标是让 ListView 包含一个多行 texfield（具有任意数量的行，maxLines=null），其后跟几个 ListTiles。当向 TextField 添加行时，它会增长并且 ListTiles 应该相应地移动。但是，以下代码存在意外行为：

@override
  Widget build(BuildContext context) 
    
    ListView l = new ListView(children: [

      TextField(maxLines: null),

      SizedBox(height: 50, child: ColoredBox(color: Colors.yellow,child: Text("Tile1"),) ),

      ListTile(tileColor: Colors.blueGrey,title: Text("Tile1"),),

      ListTile(tileColor: Colors.blueGrey,title: Icon(Icons.looks_two_rounded),)
    ]);

    return Scaffold(backgroundColor: Color(0xdcdcffff), body: Center(child: l));
  

https://gfycat.com/fr/obviousshorttermchihuahua

绿色框按预期向下移动，但 ListTiles 不会（尽管它们的子元素会），直到我滚动，它们才会移动到它们应该在的位置。

有没有办法解决这个问题？

【参考方案1】：

我不知道究竟是什么导致了这个错误，但我找到了一个可能对尝试做同样事情的人有用的解决方法：我将 ListTile 放在一个彩色框内透明：

@override
  Widget build(BuildContext context) 
    ListView l = new ListView(children: [
      TextField(maxLines: null),
      SizedBox(
          height: 50,
          child: ColoredBox(
            color: Colors.green,
            child: Text("Tile1"),
          )),
      ColoredBox(
        color: Color(0x77ff0000),
        child: ListTile(
          tileColor: Colors.transparent,
          title: Text("Tile1"),
        ),
      ),
      ColoredBox(
          color: Color(0x77ff0000),
          child: ListTile(
            tileColor: Colors.transparent,
            title: Icon(Icons.looks_two_rounded),
          )),
    ]);

    return Scaffold(body: Center(child: l));
  

https://gfycat.com/fr/idioticquarrelsomegossamerwingedbutterfly