文本表单字段上方的列表列表

Question

我正在创建简单的 listtile 列表。小部件的放置方式如下：Scaffold -> Padding -> Column -> TextFormField、SizedBox、（Expanded -> ListView.separated（子级为listtile））、Container。 但是当我滚动时会出现这种图像：

是的，文本在搜索字段下消失，但列表图块位于搜索字段上方。

列表图块应该像文本一样消失，不是吗？

Answer 1

请检查以下代码，它可能对您有帮助。

body: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              hintText: 'Search here...'),
        ),
      ),
      SizedBox(height: 15),
      Expanded(
        child: ListView.builder(
          itemCount: 15,
          itemBuilder: (context, index) => GestureDetector(
            onTap: () {
              context.read<HomeBloc>().add(HomeItemClickEvent());
            },
            child: Container(
              //height: 55,
              width: double.infinity,
              margin:
                  const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                color: Colors.grey.withOpacity(0.2),
              ),
              child: ListTile(
                title: Text('Title'),
              ),
            ),
          ),
        ),
      ),
    ],
  ),