按下按钮时颤动显示Listview [英] Flutter display Listview when button pressed

问题描述

   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中做到这一点.

I am implementing listview with checkbox in my project.I have 3 buttons which is created in a row.I want to display the list when the button is clicked.Here the issue is listview is not at all visible for me.I had implemented the same example in android but i don't know how to do this in flutter.

推荐答案

尝试一下.这是一个示例屏幕，您可以参考其实现. 在此列表中，有3个示例列表被替换为主列表，您可以添加一个函数，该函数将根据选择对列表进行排序(因此无需多个列表)

Try this. This is a sample screen which you can refer for your implementation. In this there are 3 sample list which are being replaced to main list on selection, you can add a function which will sort the list based on selection (so no need to have multiple lists)

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，然后更改列表数据并尝试.

In your code you didn't added ListView in widget, so it will not show any list, so try adding ListView in widget and then change the list data and try it.

这篇关于按下按钮时颤动显示Listview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！