Flutter - 如何对齐（小部件）孙小部件与孩子相同

Posted 2023-02-23

【中文标题】Flutter - 如何对齐（小部件）孙小部件与孩子相同

【英文标题】：Flutter - How to Align (widget) grandchildren widgets the same as the child

【发布时间】：2020-06-21 21:31:32

【问题描述】：

我已经在 google 和 s.o 上寻找答案，但找不到我喜欢的答案。

我使用 Stack 小部件作为我的页面布局。在该堆栈内，我将所有子小部件与对齐小部件定位。我试图在我的 Align 子项下创建一个 ListView 小部件，但它的卡片（子项）忽略了我设置为 List 的对齐值的 ListView 对齐方式。

    Align(
      alignment: Alignment(0, -0.28),
      child: Divider(
        color: Color.fromARGB(50, 255, 255, 255),
      ),
    ),
    Align(
      alignment: Alignment(0, -0.20),
      child: ListView(
        children: <Widget>[
          Card(
            child: ListTile(
            leading: Icon(some_icon),
            title: Text("blabla"),
          )),
        ],
      ),
    ),

我希望 ListView 项目在我的 Divider 下开始，因为为垂直对齐设置的值是 -0.20，它低于 Divider 对齐 (-0.28)。 但是，它的外观是这样的：

如果我删除 ListView 并将 Card 小部件设置为 Align 直接子部件，则定位很好。 现在，正如我在文档中所读到的，Align 小部件的对齐值是唯一的孩子，那么我将如何为 ListView 孩子（Rows/ListTiles/Card 等）实现相同的效果？

【参考方案1】：

这只是一个示例！根据您的要求进行修改。 （已编辑）

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Stack(children: [
      //Your behind widgets here...
      Stack(children: [
        Card(
            color: Colors.white,
            child:
                ListTile(title: Text('1st card', textAlign: TextAlign.center))),
        Align(
          alignment:Alignment(0, -0.20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                height: 2,
                width: double.infinity,
                color: Colors.black,
                margin: EdgeInsets.only(right: 25, left: 25),
              ),
              SizedBox(
                height: 10,
                width: double.infinity,
              ),
              Card(
                  color: Colors.white,
                  child: ListView(shrinkWrap: true, children: [
                    ListTile(
                        title: Text('List card', textAlign: TextAlign.center))
                  ])),
            ],
          ),
        )
      ])
    ]));
  

【讨论】：

谢谢，但这不是我想要实现的。您已强制使用高度 X 的“SizedBox”将第二张卡片“推”下。但是，我对如何让我的 ListView chlidren 从 Align 小部件值位置开始感兴趣，而不是使用另一个小部件“向下推”它们..

再次感谢，但这包括 Card->ListView 而不是其他方式，这是我想要弄清楚的。基本上我想要一个 ListView 从对齐位置 (x,y) 开始，并在其中包含一个 Row/Card，它将相对于 ListView 开始位置而不是在屏幕顶部开始，所有上述内容都在 Stack小部件。

您上面的草图/布局还不够！提供你想要的更好的图片！

【参考方案2】：

请试试这个...

      body: Container(
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Divider(
                  thickness: 20, // this is for example
                  height: 22, // this is for example
                  color: Colors.red, // this is for example
                ),
                Card (
                    child: ListTile(
                  leading: Icon(Icons.print),
                  title: Text("blabla"),
                )),
              ],
            ),
          ),
        ),
      ),

【讨论】：

嘿 chirag，tnx，但我没有看到任何对包含卡片/行的 ListView 的引用。您可以查看我对您上面答案的评论以获得更清晰的解释。