Adding new ListTile item on click

问题

I have created method and widget, right now my code is working fine because data is static, i want to add new item in ListTile when i press Add Button.

method:

Card listSectionMethod(String title, String subtitle, IconData icon) {
  return new Card(
    child: ListTile(
      title: Text(
        title,
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      subtitle: Text(subtitle),
      trailing: Icon(
        icon,
        color: Colors.blue,
      ),
    ),
  );
}

Widget:

Widget listSection = Container(

   margin: EdgeInsets.only(top: 210),
              child: ListView(
                children: [
                   Column(
                   children: [
                      listSectionMethod("TITLE 1", "hello i am subtitle one",Icons.forward),
                      listSectionMethod("TITLE 2", "hello i am subtitle two",Icons.forward),  
                   ],
                  ),
                ],),
);

Button:

FloatingActionButton(
 onPressed:()
 {
    print("clicked"); //i want to add new item from here, when i press on click
 }, 

 child:Text("+"),
 backgroundColor: Colors.blue,
),
);

回答1:

look to add a new item you must do the following:

Assuming your screen is a StatefulWidget

class SomePage extends StatefulWidget {
  @override
  _SomePageState createState() => _SomePageState();
}

class _SomePageState extends State<SomePage> {
     var _listSection = List<Widget>();

     @override
     void initState() {
        super.initState();
        // Here initialize the list in case it is required
        _listSection.add(
          listSectionMethod("TITLE 1", "hello i am subtitle one", Icons.forward),
        );
        _listSection.add(
          listSectionMethod("TITLE 2", "hello i am subtitle two", Icons.forward),
        );
     }
 }

Widget:

    Widget listSection() {
        return Container(
          margin: EdgeInsets.only(top: 210),
          child: ListView(
            children: [
              Column(
                children: this._listSection, // ----> Add this
              ),
            ],
          ),
        );
     }

Button:

    FloatingActionButton(
          onPressed: () {
            setState(() {
               // Here we add a new item to the list
              _listSection.add(
                listSectionMethod("New TITLE", "hello from click", Icons.forward),
              );
            });
          },
          child: Text("+"),
          backgroundColor: Colors.blue,
       );

回答2:

Before I start, you need to make sure you're using a StatefulWidget, not a StatelessWidget so we can take advantage of the setState() method.

First, define a class member variable. You could put it on top of the class, or where ever else as long as it's not inside a function.

List<Widget> _listOfWidgets = [];

Second, let's modify your FAB (Floating Action Button) code:

FloatingActionButton(
  onPressed: () {
    print("fab clicked");
    _addItemToList(); // new method
  }, 
  child:Text("+"),
  backgroundColor: Colors.blue,
);

Let's now define the new method which will use our class member variable.

_addItemToList() {
  List<Widget> tempList = _listOfWidgets; // defining a new temporary list which will be equal to our other list
  tempList.add(Text("I'm an added item!"));
  setState(() {
    _listOfWidgets = tempList; // this will trigger a rebuild of the ENTIRE widget, therefore adding our new item to the list!
  });
}

Let's modify your existing code to work with our new code:

Widget listSection = Container(
   margin: EdgeInsets.only(top: 210),
   child: ListView(
     children: [
       Column(
         children: _listOfWidgets,
       ),
     ],
   ),
);

There you go!

来源：https://stackoverflow.com/questions/59276419/adding-new-listtile-item-on-click

标签

Flutter

flutter-layout