Question

我是扑朔迷离的新手，我想在左侧和用户个人资料上创建一个数字序列，如下所示。

我最终就这样

这是我的代码，就像

import 'package:DoNation/model/leaderboard_item.dart';
import 'package:DoNation/shared/utils/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class LeaderBoardPage extends StatefulWidget {
  @override
  _LeaderBoardPageState createState() => _LeaderBoardPageState();
}

class _LeaderBoardPageState extends State<LeaderBoardPage> {
  List<LeaderBoardItem> _leaderBoardItems = List<LeaderBoardItem>();

  @override
  Widget build(BuildContext context) {
    generateDummyData();

    return Container(
        child: ListView.builder(
          itemCount: _leaderBoardItems.length,
          itemBuilder: (BuildContext ctxt, int index) => buildList(ctxt, index)
        ),
      );
    // );
  }

  Widget buildList(BuildContext ctxt, int index) {
    int ind = index + 1;

    Widget crown;

    if (ind == 1) {
      crown = Padding(
        padding: const EdgeInsets.only(right: 0.0),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Center(child: Icon(FontAwesomeIcons.crown, size: 36, color: Colors.yellow,)),
            Padding(
              padding: const EdgeInsets.only(left: 8.0, top: 6),
              child: Center(child: Text('1', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),)),
            )
          ],
        )
      );
    } else if (ind == 2) {
      crown = Padding(
        padding: const EdgeInsets.only(right: 0.0),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Center(child: Icon(FontAwesomeIcons.crown, size: 36, color: Colors.grey[300],)),
            Padding(
              padding: const EdgeInsets.only(left: 8.0, top: 6),
              child: Center(child: Text('2', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),)),
            )
          ],
        )
      );
    } else if (ind == 3) {
      crown = Padding(
        padding: const EdgeInsets.only(right: 0.0),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Center(child: Icon(FontAwesomeIcons.crown, size: 36, color: Colors.orange[300],)),
            Padding(
              padding: const EdgeInsets.only(left: 8.0, top: 6),
              child: Center(child: Text('3', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),)),
            )
          ],
        )
      );
    } else {
    crown = CircleAvatar(
          backgroundColor: Colors.grey,
          radius: 13,
          child: Text(
            ind.toString(), 
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 15
              ),)
        );
    }

    return Padding(
      padding: const EdgeInsets.only(left:8.0,right: 8.0,top: 10),
      child: Container(
        height: 100,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15.0)),
            boxShadow: [BoxShadow(color: Colors.black26,blurRadius: 5.0)]
        ),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.only(right: 0.0),
                  child: Row(
                    children: <Widget>[
                       Align(
                        alignment: Alignment.centerLeft,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 15.0, right: 25),
                          child: crown,
                        ),
                      ),

                      Align(
                        child: CircleAvatar(
                          backgroundColor: Colors.red.shade800,
                          child: Text('GI'),
                          radius: 30,
                        ),
                      ),

                      Align(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(left: 8.0, top: 5),
                              child: Text(_leaderBoardItems[index].name, style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold,fontSize: 18),),
                            ),
                          ],
                        )
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerRight,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(_leaderBoardItems[index].totalCalory + ' ' + AppLocalizations.of(context).i18nKCal, style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold,fontSize: 18),),
              ),
            )
          ],
        ),
      ),
    );
  }

  void generateDummyData() {
    _leaderBoardItems = List<LeaderBoardItem>();

    for (var i = 1; i < 21; i++) {
      LeaderBoardItem lbi = LeaderBoardItem(
        userId: 'user$i',
        name: 'User $i',
        email: 'user$i@gmail.com',
        totalCalory: (1000 + i).toString(),
      );

      _leaderBoardItems.add(lbi);
    }

    _leaderBoardItems =_leaderBoardItems.reversed.toList();
  }
}

我找不到在我的代码中实现堆栈小部件的方法，以使序列号和用户配置文件图像看起来都像我想要的那样，如上所示。有解决方案吗？

并且有可能使我的代码看起来更干净吗？谢谢

Answer 1

添加一个Row子（具有数字值），然后使用Padding，Container，Width / Height属性将其相应定位。

Answer 2

fisrt：制作专栏

second：将个人资料设置为ui

third：并使用Expended

例如

 child: new Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: **// profile ui,**
          ),
        ),
        Expanded(
          child: new ListView.builder(
              itemCount: data == null ? 0 : data.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  child: new Container(
                    child: new Center(
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          new Card(
                            child: new Container(
                              child:
                                  new Column(
                                    children: <Widget>[
                                       **//make leaderboard ui**
                                    ],
                              ),
                              padding: EdgeInsets.all(15.0),
                            ),
                            shape: OutlineInputBorder(
                                borderRadius:
                                BorderRadius.all(Radius.circular(25.0))),
                          ),
                        ],
                      ),
                    ),
                  ) , onTap: () => Scaffold.of(context).showSnackBar(SnackBar(content: Text(data[index]['movieNm']) , duration: Duration(seconds: 2),)),);
              }),
        )
      ],
    ),

如何使排行榜变得扑朔迷离？

2 个答案: