【问题标题】:How to stack the items inside a "Listview.builder" on top of each other? flutter如何将“Listview.builder”中的项目堆叠在一起?扑
【发布时间】:2022-01-16 16:23:36
【问题描述】:

我想将项目堆叠在 Listview.builder 中,但是当我尝试使用 Align() 类并设置其 heightfactor: 时, 它为 topbottom 提供了填充,我不希望这样,有人知道如何正确堆叠它们吗?

我的中心 SyncfusionLinearGauge:

                      //Center SyncfusionLinearGauge 
                      Expanded(
                        child: ScrollablePositionedList.builder(
                          itemScrollController: itemController,
                          itemCount: _provider.loadedContestants.length,
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            final data = _provider.loadedContestants[index];
                            return Align(
                              heightFactor: 0.0001,
                              child: SfLinearGauge(
                                // showLabels: false,
                                // showTicks: false,
                                // showAxisTrack: false,
                                axisLabelStyle: TextStyle(color: Colors.white),
                                majorTickStyle: LinearTickStyle(
                                    color: Colors.white, length: 10),
                                minorTickStyle:
                                    LinearTickStyle(color: Colors.white),
                                axisTrackStyle:
                                    LinearAxisTrackStyle(color: Colors.red),
                                orientation: LinearGaugeOrientation.vertical,
                                minimum: 0,
                                maximum: 100,
                                animationDuration: 500,
                                markerPointers: [
                                  //User pointer
                                  LinearWidgetPointer(
                                    value: data.points,
                                    position: LinearElementPosition.cross,
                                    offset: 50.0,
                                    animationDuration: 2000,
                                    child: UserCardWidget(
                                      data: data,
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ),

我的用户卡:

class UserCardWidget extends StatelessWidget {
  UserCardWidget({Key key, this.data}) : super(key: key);

  DemoUserModel data;

  @override
  Widget build(BuildContext context) {
    bool _isKevinTeam = data.team == 'Kevin';
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.only(left: 167.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          // mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 15,
              height: 15,
              decoration: BoxDecoration(
                color: const Color(0xff2da162),
                borderRadius: BorderRadius.all(
                  Radius.circular(50),
                ),
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text(
                  '${data.firstName.toString()}M',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: "SFProText",
                    fontStyle: FontStyle.normal,
                    fontSize: 13.0,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我想要什么:

我有什么:

【问题讨论】:

    标签: flutter dart listview stack


    【解决方案1】:

    我最终做的是一起删除 listview.builder 并将列表映射到 ma​​rkerPointers:[], 所以这就是结果。

    我的线性仪表:

                    Expanded(
                      flex: 4,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Expanded(
                            child: SizedBox(
                              height: size.height * 0.57,
                              child: SfLinearGauge(
                                showLabels: false,
                                showTicks: false,
                                showAxisTrack: false,
                                orientation: LinearGaugeOrientation.vertical,
                                minimum: 0,
                                maximum: 100,
                                animationDuration: 500,
                                markerPointers: _sortedList
                                    .asMap()
                                    .map(
                                      (i, data) {
                                        return MapEntry(
                                          i++,
                                          LinearWidgetPointer(
                                            value: data.points,
                                            position: LinearElementPosition.cross,
                                            animationDuration: 2000,
                                            offset: 500,
                                            child: UserCardWidget(
                                              data: data,
                                              index: i,
                                              isExpandedMethod: _isExpanded,
                                            ),
                                          ),
                                        );
                                      },
                                    )
                                    .values
                                    .toList(),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
    

    这是结果:

    【讨论】:

      猜你喜欢
      • 2017-10-01
      • 1970-01-01
      • 1970-01-01
      • 2017-11-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多