Question

我想将Container的第二个子容器移动，并将其包裹在Padding中，使其位于屏幕底部而不是顶部。

 body: Stack(
        children: <Widget>[
          ListView.builder(
                  itemCount: itemData.length,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){ 
                   return Text(data[index].name);
 }

                     ),

          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.cyan
              ),
              padding: EdgeInsets.all(10),
              height: 60,

            ),
          )
        ],
      ),

Answer 1

要将小部件放置在堆栈中，可以使用Positioned小部件。您可以将其传递到左右顶部和底部偏移位置，以在堆栈中任意放置。

https://m.youtube.com/watch?v=EgtPleVwxBQ

Answer 2

用Align为第二个孩子包裹：

Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Colors.cyan),
      padding: EdgeInsets.all(10),
      height: 60,
    ),
  ),
)

但是请注意，当列表变大时，它将覆盖您的列表。除非您要这样做，否则可以使用Column而不是Stack。

将Stack的子级移到屏幕底部

2 个答案: