flutter - Flutter - 底部工作表如何将文本字段移动到底部

Question

我希望 TextField 显示在屏幕底部。

return Column(
      children: [
        const _Title(),
        Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
            const TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ],
        ),
      ],

如果我将 Wrap 我的 Textfield Widget 放在位置 bottom:0 我会得到一个 hasSize 错误。

标签： flutter

Answer 1

Stack首先，用一个小部件包装Expanded它，以便它占据整个垂直可用空间。

然后，用 a 包裹TextFielda Positioned，除了设置bottom为零之外，您还需要将leftand设置为right您想要的任何值。

return Column(
    children: [
      const _Title(),
      Expanded(
        child: Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: const TextField(
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                    ),
                  ),
                  border: OutlineInputBorder(),
                  hintText: 'Enter a search term',
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  );