分段条滚动条问题

Question

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

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所有代码我会推送所有需要的code.If，我想在顶部列出的所有代码

Answer 1

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

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

这是 listingShow，它 return 是您用作 ListView 的 title 属性的小部件。

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

问题是，您的 ListView 始终具有固定数量的项目，即 data.length，但在您的函数中，如果数据与特定类型匹配（if (data[i]['regTypeId'] == 3)), 否则，你 return 什么都没有。但是 ListTile 一直都在那里，只是不显示任何内容。

我的建议是将data分成3个单独的列表，你可以看看我是怎么做的here，它可能没有优化，你需要想出更好的方法。

分段条滚动条问题

segemented bar scrolling bar issue

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation