按下按钮时会颤动地显示Listview

时间:2019-02-25 09:12:37

标签: flutter

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

2 个答案:

答案 0 :(得分: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,然后更改列表数据并尝试。

答案 1 :(得分:0)

我认为您有两种解决问题的方法。

  1. 预加载listView并将其visibility设置为不可见/不可见
  2. 尝试使用此blog
  3. 中的代码