我如何放置一个空格之间我的文本和一个图标上的行部件在Flutter

ykejflvf  于 2023-01-09  发布在  Flutter
关注(0)|答案(2)|浏览(97)

我需要执行类似的操作,但不知道该怎么做。当我尝试使用Align移动时,图标不移动:

我试过这个:

Widget AreaProfil(){
  return Column(
      children: [
        Container(
            margin: const EdgeInsets.only(left: 10.0),
            padding: const EdgeInsets.only(top: 10.0, ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
            ),
            child: Card(
              child: Container(
                child: Row(
                children:  [
                  const Text(
                    "Mon Profil",
                    style: TextStyle(
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Row(
                      children: const [
                        Icon(Icons.edit),
                     ],
                    ),
                  ),
                 ]
                )
               ),
        )
     )
  ]
  );
}

这样做的结果不工作,所有的图标都停留在左边。

dfddblmv

dfddblmv1#

如果您希望在几个小部件之间有一个间隙,而MainAxisAlignment.spaceBetween对您来说还不够,您还可以使用SpacerExpanded来创建这样的间隙。

Widget AreaProfil(){
 return Column(
  children: [
    Container(
        margin: const EdgeInsets.only(left: 10.0),
        padding: const EdgeInsets.only(top: 10.0, ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Card(
          child: Row(
            children:  [
              const Text(
                "Mon Profil",
                style: TextStyle(
                   fontSize: 20,
                   fontWeight: FontWeight.bold,
                ),
              ),
              Spacer(),
              Icon(Icons.edit),
              Icon(Icons.edit),
              ),
             ],
           ),
    )
    )
  ]
);
}
velaa5lx

velaa5lx2#

  • 需要指定父组的宽度
  • 这是一个例子
Widget AreaProfil(BuildContext context) {
  var width = MediaQuery.of(context).size.width;
  return Column(children: [
    Container(
        width: width,
        margin: const EdgeInsets.only(left: 10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Padding(
          padding: const EdgeInsets.only(
            top: 10.0,
          ),
          child: Card(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                const Text(
                  "Mon Profil",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Row(
                  children: [
                    Align(
                      alignment: Alignment.centerRight,
                      child: Row(
                        children: const [
                          Icon(Icons.edit),
                        ],
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Row(
                        children: const [
                          Icon(Icons.edit),
                        ],
                      ),
                    )
                  ],
                )
              ])),
        ))
  ]);
}

相关问题