如何在选择时更改列表图块的布局？

Question

我有一个列表视图。如果选择索引，我想更改Tile布局。类似image with ListTile Selected和我开发的what i have able to achieve till now。在选择“列表图块”布局后，应更改为第一个链接中所示。

Widget _buildRow() {

 return

   Column(
    children: <Widget>[
      Divider(
        height: 35.0,
      ),
            ListTile(
              leading: new Text(
                "Set 1",
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.black,
                  decoration: TextDecoration.none,
                  decorationStyle: TextDecorationStyle.double,
                  fontFamily: 'Raleway-Medium',
                ),
              ),
              title: Center(
                child: new Text(
                  "40 Lbs",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black,
                    decoration: TextDecoration.none,
                    decorationStyle: TextDecorationStyle.double,
                    fontFamily: 'Raleway-Medium',
                  ),
                ),
              ),
              trailing: IconButton(
                icon: (_isFavorited
                    ? Icon(Icons.check_circle)
                    : Icon(
                        Icons.check_circle_outline,
                        color: Colors.grey,
                      )),
                color: Colors.lightBlueAccent,
                iconSize: 35.0,
                splashColor: Colors.tealAccent,
                onPressed: _toggleFavorite,
              ),
            ),
      Stack(
       children: <Widget>[
         Padding(
           padding: const EdgeInsets.only(bottom:10.0),
           child: Divider(
             height: 40.0,
           ),
         ),
         Center(
           child: IconButton(
             icon: (_isFavorited
                 ? Icon(Icons.cancel)
                 : Icon(
               Icons.cancel,
               color: Colors.grey,
             )),
             color: Colors.lightBlueAccent,
             iconSize: 35.0,
             splashColor: Colors.tealAccent,
             onPressed: _resetSetData,
           ),
         ),

       ],
      ),

      ListTile(

              title: Center(
                child: new Text(
                  "10 reps",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black,
                    decoration: TextDecoration.none,
                    decorationStyle: TextDecorationStyle.double,
                    fontFamily: 'Raleway-Medium',
                  ),
                ),
              ),
            ),
    ],
  );
}

void _toggleFavorite() {
   setState(() {
    if (_isFavorited) {
     _isFavorited = false;
   } else {
     _isFavorited = true;
  }
});
}

void _resetSetData() {
  setState(() {
    if (_isFavorited) {
    _isFavorited = false;
  } else {
    _isFavorited = true;
  }
});
 }

实现此用户界面的最佳方法是什么？

Answer 1

使用容器包装列表图块，并使用bool维护图块的状态，以便您可以更改列表图块的颜色。谢谢