Question

我已经创建了method和widget，现在我的代码可以正常工作了，因为数据是static，所以我想在按[Add]时在ListTile中添加新项目按钮。

方法：

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 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),  
                   ],
                  ),
                ],),
);

按钮：

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

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

Answer 1

在开始之前，您需要确保使用的是StatefulWidget，而不是StatelessWidget，以便我们可以利用setState()方法。

首先，定义一个类成员变量。您可以将其放在类的顶部，或者只要不在函数内即可。

List<Widget> _listOfWidgets = [];

第二，让我们修改您的FAB（浮动操作按钮）代码：

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

现在让我们定义将使用我们的类成员变量的新方法。

_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!
  });
}

让我们修改您现有的代码以使用我们的新代码：

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

你去了！

Answer 2

要添加新项目，您必须执行以下操作：

假设您的屏幕是一个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 listSection() {
        return Container(
          margin: EdgeInsets.only(top: 210),
          child: ListView(
            children: [
              Column(
                children: this._listSection, // ----> Add this
              ),
            ],
          ),
        );
     }

按钮：

    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,
       );

点击添加新的ListTile项目

2 个答案: