Question

我正尝试建立一个如下图所示的视图。 发您的回复只是堆叠在底部，而其他内容则可以滚动。几个小时来，我一直在努力实现这一目标。确实；就像下面的图片一样。共有四个部分：

帖子（鸣叫）
图标行
注释（滚动）
此推文是静态的

Answer 1

解决方案是使用Align小部件。因此，在您的Stack中，您应该将其作为堆栈中的最后一个元素：

Align(
  alignment: Alignment.bottomCenter,
  child: // your widget would go here
),

根据您的问题，我判断出您已经知道如何做所有其他部分，而只是想知道底部。您也可以使用Align以其他方式对齐事物（例如topCenter，bottomLeft等）。希望这会有所帮助，如果是，请投赞成票并接受作为答复，如果没有在下面发表评论。

编辑： 我不会使用Stack。我将整个窗口小部件树包装在Column中，并将帖子放入弹性系数为1的Expanded小部件中，并在其下方放置一个Row图标。然后将ListView放入Expanded小部件中，弹性为4（您可以尝试使用值）。最后，在Column中，我将添加“发给您回复”小部件。

简单的布局代码可让您了解如何实现它：

Column(
      children: <Widget>[
        Expanded(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              //your post
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  // your icons
                ],
              ),

              //your comments
            ],
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: // you textField,
        ),
      ],
    )

Answer 2

尝试一下

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(50),
                    child: Center(
                      child: Text(
                        "A POST"
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Icon(Icons.details),
                      Icon(Icons.print),
                      Icon(Icons.translate),
                      Icon(Icons.map)
                    ],
                  ),
                  Expanded(
                    child: ListView(
                      children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
                    ),
                  )
                ],
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "Tweet your reply"
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：

如果您希望帖子随其滚动，这应该有所帮助

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(50),
                      child: Center(
                        child: Text(
                          "A POST"
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Icon(Icons.details),
                        Icon(Icons.print),
                        Icon(Icons.translate),
                        Icon(Icons.map)
                      ],
                    ),
                    Column(
                      children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
                    )
                  ],
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "Tweet your reply"
              ),
            )
          ],
        ),
      ),
    );
  }
}

如何使小部件仅停留在页面底部

2 个答案: