按下按钮时 flutter 显示 ListView

Question

   List<ServicesMensCollection> menServicesList = []
    ..add(ServicesMensCollection('ihdgfstfyergjergdshf', 'janik', 10))
    ..add(ServicesMensCollection('ihdgfstfyergjerg', 'janik', 10))
    ..add(ServicesMensCollection('ihdgfstfyergjerg', 'janik', 10))
    ..add(ServicesMensCollection('ihdgfstfyergjergdf', 'janik', 10))
  bool _value2 = false;
  void _value2Changed(bool value) => setState(() => _value2 = value);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new Scaffold(
          body: new Container(
            decoration: new BoxDecoration(color: const Color(0xFFEAEAEA)),
            child: Padding(
              padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
              child: Column(
                children: <Widget>[
                  servicesCategory(),
                  ],),),)); }
Widget servicesButton() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            onPressed: () {listView();},
            child: Text('Mens'),),
          RaisedButton(
            onPressed: () {listView();},
            child: Text('Womens')),
          RaisedButton(
            onPressed: () {listView();},
            child: Text('Childrens'),
          )]); }

Widget listView(){
  return ListView.builder(
    itemCount: menServicesList.length,
    itemBuilder: (BuildContext context, int index) {
      return list(index); },);
}

  Widget list(int index){
    return Container(
     child: Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: <Widget>[
        Text(menServicesList[index].name),
        Text(menServicesList[index].name),
        Checkbox(onChanged:_value2Changed,
         value: _value2,
        )],),);
  }}

我在我的项目中实现带有复选框的 ListView 。我有 3 个连续创建的按钮。我想在单击按钮时显示列表。这里的问题是 ListView 对我来说根本不可见。我在 android 中实现了相同的示例，但我不知道如何在 flutter 中执行此操作。

Answer 1

试试这个。这是一个示例屏幕，您可以引用它来实现。在此有 3 个样本列表，它们在选择时被替换为主列表，您可以添加一个函数，该函数将根据选择对列表进行排序(因此不需要多个列表)

import 'package:flutter/material.dart';

/*
These are the sample list for demo
 */
List<ItemVO> mainList = List();
List<ItemVO> sampleMenList = [
  ItemVO("1", "Mens 1"),
  ItemVO("2", "Mens 2"),
  ItemVO("3", "Mens 3")
];
List<ItemVO> sampleWomenList = [
  ItemVO("1", "Women 1"),
  ItemVO("2", "Women 2"),
  ItemVO("3", "Women 3")
];
List<ItemVO> sampleKidsList = [
  ItemVO("1", "kids 1"),
  ItemVO("2", "kids 2"),
  ItemVO("3", "kids 3")
];

class TestScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestScreen();
  }
}

class _TestScreen extends State<TestScreen> {
  @override
  void initState() {
    super.initState();
    mainList.addAll(sampleMenList);
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: <Widget>[
          ListView.builder(
            itemBuilder: (BuildContext context, index) {
              return getCard(index);
            },
            itemCount: mainList.length,
          ),
          Container(
            margin: EdgeInsets.only(bottom: 20),
            alignment: Alignment.bottomCenter,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {
                    mainList.clear();
                    setState(() {
                      mainList.addAll(sampleMenList);
                    });
                  },
                  heroTag: "btn1",
                  child: Text("Mens"),
                ),
                FloatingActionButton(
                  onPressed: () {
                    mainList.clear();
                    setState(() {
                      mainList.addAll(sampleWomenList);
                    });
                  },
                  heroTag: "btn2",
                  child: Text("Women"),
                ),
                FloatingActionButton(
                  onPressed: () {
                    mainList.clear();
                    setState(() {
                      mainList.addAll(sampleKidsList);
                    });
                  },
                  heroTag: "btn3",
                  child: Text("Kids"),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  /*
    Get the card item for a list
   */
  getCard(int position) {
    ItemVO model = mainList[position];
    return Card(
      child: Container(
        height: 50,
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "ID:: "+model._id,
              style: TextStyle(fontSize: 18, color: Colors.black),
            ),
            Padding(padding: EdgeInsets.only(left: 5,right: 5)),
            Text(
              "Name:: "+model._name,
              style: TextStyle(fontSize: 18, color: Colors.black),
            )
          ],
        ),
      ),
      margin: EdgeInsets.all(10),
    );
  }
}

/*
Custom model
i.e. for itemList
 */
class ItemVO {
  String _id, _name;

  String get id => _id;

  set id(String value) {
    _id = value;
  }

  get name => _name;

  set name(value) {
    _name = value;
  }

  ItemVO(this._id, this._name);
}

在你的代码中，你没有在小部件中添加ListView，所以它不会显示任何列表，所以尝试在小部件中添加ListView，然后更改列表数据并尝试。