Question

在我的应用程序中，我有以下变量：

List<Likers> likers = mediaOrAd.likers;

我想使这种设计像这样的布局：

对于此代码，我得到了错误，但它是不正确的：

  _buildFeedLikers(Feeds mediaOrAd) {
    List<Likers> likers = mediaOrAd.likers;
    double fromRight = 0;
    if (likers != null && likers.length > 0) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Stack(
            children: <Widget>[
              ...List.generate(likers.length, (liker) {
                fromRight = fromRight + 10;
                return Positioned(
                  top: 0.0,
                  right: fromRight,
                  child: AvatarWidget(
                    imageUrl: likers[liker].profilePicUrl,
                  ),
                );
              })
            ],
          )
        ],
      );
    } else {
      return Container();
    }
  }

此小部件应放在此树中

Expanded
  ListView.builder
    Container
      Card
        ExpandableNotifier
          ScrollOnExpand
            Column

Answer 1

输出：

代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Stack(
      children: List.generate(
        5,
        (i) => Positioned(
          right: i * 30.0,
          child: ClipOval(
            child: Container(
              width: 56,
              height: 56,
              color: Colors.blue[(i * 100) % 900],
            ),
          ),
        ),
      ).toList(),
    ),
  );
}

Answer 2

这是为您更新的帖子：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Stack(
      children: <Widget>[
        Container(
          child: Container(
            child: Column(
              children: <Widget>[
                Expanded(
                  child: ListView(
                    children: <Widget>[
                      Container(
                        child: Card(
                          child: Column(
                            children: <Widget>[
                              SizedBox(
                                height: 56,
                                child: Stack(
                                  children: List.generate(
                                    5,
                                    (i) => Positioned(
                                      right: i * 30.0,
                                      child: ClipOval(
                                        child: Container(
                                          width: 56,
                                          height: 56,
                                          color: Colors.blue[(i * 100) % 900],
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

Flutter在彼此水平上方设计多个小部件

2 个答案: