Flutter:-将图标对准容器的右下角 [英] Flutter :- Align a icon to the right bottom of a container

问题描述

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

I tried a column with an aligned icon but it didn't display correctly

如果有人有帮助的想法.这将不胜感激.谢谢

If anyone has any idea to help. It would be greatly appreciated. Thank you

这是我尝试过的代码

    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;
  }```

推荐答案

您需要使用 Stack 小部件，我已经通过使用堆栈小部件，请在解决方案下方检查您的情况

You need to use the Stack widget for it, i have done similar task with the use of the Stack widget,please check thee below solution

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:-将图标对准容器的右下角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！