如何在ListTile扩展后放置文本字段？

发布于 2025-02-13 09:35:56 字数 1000 浏览 0 评论 0原文

在页面上，我有一个分页底部的列表，该列表用按钮显示（1、2、3 ...）。每个页面都有10个项目。在向下滚动时，每个页面上的每个列表中都有一个文本字段。我该如何插入？在我的代码示例中，我有一个错误：RenderFlex溢出。我希望文本字段在列表的末尾。我的代码：

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return ListTile(
                 ...
                );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

原文

On the page I have a list, at the bottom of the pagination, which is displayed with buttons (1, 2, 3...). Each page has 10 items. It is necessary that in each list on each page when scrolling down there is a text field. How can I insert it? In my code example I have an error: RenderFlex overflowed. I want the text field to be at the end of the list. My code:

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return ListTile(
                 ...
                );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风吹短裙飘 2025-02-20 09:35:56

您好亲爱的朋友，如果您想放在之后 listile a textfield，您可以返回列 itembuilder 然后将您的childeren放在

这里

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return column(
                  childeren: [
                     ListTile(
                         ...
                        ),
                     textfield(),
                 ],
              );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

hello dear friend if you want to put after each listile a textfield you can return a column in itembuilder then put your childeren in there

like this

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return column(
                  childeren: [
                     ListTile(
                         ...
                        ),
                     textfield(),
                 ],
              );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

回复收藏 0 原文

清旖 2025-02-20 09:35:56

首先，您需要从代码中删除扩展（）小部件，这只是将您的listView扩展到屏幕的高度和宽度。

接下来，用singlechildscrollview（）窗口小部件将您的列包裹起来，以使您的listView，textfield和分页窗口小部件可滚动。

之后，在listView中添加NeverScrollables Crollphysics（）物理。

您的代码应该看起来像这样：

body: Padding(
        padding: const EdgeInsets.only(top: 24, bottom: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Column(
                children: [
                  ListView.separated(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: ...,
                    itemBuilder: (context, index) {
                      return ListTile(
                        ...,
                      );
                    },
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                ],
              ),
              Container(
                color: Colors.red,
                child: TextField(),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 38, right: 38),
                child: PaginationWidget(),
              ),
            ],
          ),
        ),
      ),

First of all, you need to remove the Expanded() widget from your code, that's just going to stretch your listview to the height and width of your screen.

Next wrap your column with SingleChildScrollView() widget to make your listview, textfield, and pagination widget scrollable.

After, add a NeverScrollableScrollPhysics() physics in your listview.

Your code should look like this:

body: Padding(
        padding: const EdgeInsets.only(top: 24, bottom: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Column(
                children: [
                  ListView.separated(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: ...,
                    itemBuilder: (context, index) {
                      return ListTile(
                        ...,
                      );
                    },
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                ],
              ),
              Container(
                color: Colors.red,
                child: TextField(),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 38, right: 38),
                child: PaginationWidget(),
              ),
            ],
          ),
        ),
      ),

回复收藏 0 原文

~没有更多了~