Flutter :- 将图标对齐到容器的右下角

Question

我尝试了带有对齐图标的列，但它显示不正确

如果有人有任何想法可以提供帮助。这将不胜感激。谢谢

这是我试过的代码

    List<Widget> temp = [];
    listAirline.map((airline) {
      listAirlineName.map((item) {
        if (airline.name == item) {
          temp.add(
            Column(
              children: <Widget>[
                Container(
                  height: 20,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.all(Radius.elliptical(100.0, 60.0)),
                  ),
                  child: Image.asset(
                    "images/Airlines/" + airline.id + ".jpg",
                    fit: BoxFit.fitWidth,
                  ),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Icon(
                    Icons.remove_circle,
                    color: Colors.white,
                  ),
                )
              ],
            ),
          );
        }
      }).toList();
    }).toList();

    return temp;
  }```

Answer 1

您需要为此使用 Stack 小部件，我已经使用 Stack 小部件完成了类似的任务，请查看下面的解决方案

class HomeScreen extends StatefulWidget {


  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: Container(
            height: 100.0,
            child: Align(
          alignment: Alignment.topCenter,
          child: Stack(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 20.0),
                height: MediaQuery.of(context).size.width*0.15,
                width: MediaQuery.of(context).size.width*0.4,
                child: Container(
                  margin: EdgeInsets.all(5.0),
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.all(Radius.elliptical(20.0, 20.0)),
                  ),

                ),
              )
              ,
              Positioned(
                right: 5.0,
                bottom: 0.0,
                child:
                   Icon(
                    Icons.remove_circle,
                    color: Colors.red,
                  ),

              )
            ],
          ),
        )));
  }


}

以上代码输出结果如下

Flutter :- 将图标对齐到容器的右下角

Flutter :- Align a icon to the right bottom of a container

icons

containers

image

alignment

flutter