Question

我遇到滚动条问题，数据列表加载在底部而不是顶部显示。我已经使代码动态化，可以根据条件进行加载。我是新手，我从不同的角度编写了代码，并且还在学习中。如果您想建议我以更好的方式编写代码，请继续让我知道我可以做的改变。

class EventsPageState extends State<EventsPage>
    with SingleTickerProviderStateMixin {
  int theirGroupValue = 0;

  List data = List();

  String url = 'https://e19f7c9d.ngrok.io/api/events/westernaf/packages';
  Future<String> makeRequest() async {
    var response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    setState(() {
      var extractdata = json.decode(response.body);
      data = extractdata["result"];
    });
    for (var i = 0; i < data.length; i++) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        if (data[i]['regTypeId'] == 1) {
          this.theirGroupValue = 0;
        } else if (data[i]['regTypeId'] == 2) {
          this.theirGroupValue = 1;
        } else if (data[i]['regTypeId'] == 3) {
          this.theirGroupValue = 2;
        } else {
          this.theirGroupValue = 0;
        }
      }
    }
  }

  final Map<int, Widget> logoWidgets = const <int, Widget>{
    0: Text('Early Bird'),
    1: Text('General'),
    2: Text('Onsite'),
  };

  List<bool> inputs = new List<bool>();

  @override
  void initState() {
    super.initState();
    this.makeRequest();
    setState(() {
      for (int i = 0; i < 35; i++) {
        inputs.add(false);
      }
    });
  }

  void ItemChange(bool val, int index) {
    setState(() {
      inputs[index] = val;
    });
  }

  static Widget giveCenter(String ListView) {
    return new Card(
      // child Container(
      child: Text(
        "Text: $ListView",
        style: TextStyle(color: Colors.blue, fontSize: 20.0),
        // )
      ),
    );
  }

  void _Register() {
    Navigator.push(
        context, new MaterialPageRoute(builder: (context) => LandingScreen()));
  }

  @override
  Widget _listingShow(i) {
    if (data[i]['regTypeId'] == 1) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  @override
  Widget _listingShow2(i) {
    if (data[i]['regTypeId'] == 2) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  @override
  Widget _listingShow3(i) {
    if (data[i]['regTypeId'] == 3) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  Widget build(BuildContext context) {
    List<Widget> bodies = [
      new ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow(i),
          );
        },
      ),
      new ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow2(i),
          );
        },
      ),
      new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow3(i),
          );
        },
      ),
    ];

    return Scaffold(
      body: bodies[this.theirGroupValue],
      appBar: AppBar(
        elevation: 2.0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
          'Select conference Package',
          style: TextStyle(color: Colors.black),
        ),
        bottom: PreferredSize(
          preferredSize: Size(double.infinity, 45.0),
          child: Padding(
            padding: EdgeInsets.only(top: 5.0, bottom: 10.0),
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 15.0,
                ),
                Expanded(
                  child: CupertinoSegmentedControl(
                    groupValue: this.theirGroupValue,
                    onValueChanged: (changeFromGroupValue) {
                      setState(() {
                        theirGroupValue = this.theirGroupValue;
                      });
                    },
                    children: logoWidgets,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我已在上面附上图片，如果要c显示所有代码，我将推送所有代码。如果需要，我希望将所有c显示在顶部

Answer 1

在bodies中，您可以这样定义ListView：

ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow(i),
          );
        },
      ),

然后是listingShow，它返回您用作ListView的title属性的小部件。

Widget _listingShow3(i) {
    if (data[i]['regTypeId'] == 3) {
      // construct and return the widget
    }
  }

问题是，您的ListView始终具有固定数量的项data.length，但是在您的函数中，仅当数据匹配特定类型（if (data[i]['regTypeId'] == 3)）时才返回小部件，否则，您一无所获。但是ListTile一直都在那儿，只是什么都不显示。

我的建议是将data分为3个单独的列表，您可以看到我是如何做到的here，可能没有进行优化，您需要找出更好的方法。

分段栏滚动条问题

1 个答案: