如何在 flutter 中的嵌套行内对齐元素

Question

这是我的代码，现在我想将右下角的两个图标（复制和收藏）与作者姓名的同一行对齐。 我不想在这里使用填充，因为这会产生问题，因为作者的名字长度不同。 提前致谢...

SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(8, 2, 8, 1),
                child: Container(
                  width: MediaQuery.of(context).size.width*0.90,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                          colors: <Color>[
                            Colors.blue,
                            Colors.yellow,
                          ]
                      )
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          Show_It[index].quote.toString(),
                          style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w500,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Row(
                        children: [
                          Text(
                            Show_It[index].author.toString(),
                          ),
                          Row(
                            children: [
                              IconButton(
                                onPressed: () async{
                                  FlutterClipboard.copy(Show_It[index].quote.toString()).then((value) => {
                                    Fluttertoast.showToast(msg: "Copied to clipboard")
                                  });
                                },
                                icon: Icon(
                                  Icons.copy,
                                ),
                              ),
                              Material(
                                color: Colors.transparent,
                                child: IconButton(
                                  onPressed: () async{
                                    CollectionReference ref= FirebaseFirestore.instance
                                        .collection("users")
                                        .doc(FirebaseAuth.instance.currentUser!.uid)
                                        .collection('Favourites');
                                    var data={
                                      'Quote': Show_It[index].quote,
                                      'author': Show_It[index].author,
                                    };
                                    ref.add(data).then((value) => {
                                      Fluttertoast.showToast(msg: "Added to Favourites")
                                    });
                                  },
                                  splashRadius: 20,
                                  splashColor: Colors.redAccent,
                                  icon: Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),

                    ],
                  ),
                ),
              ),
            );

我希望我提到了所有必要的细节，如果它在那里，忽略额外的代码，那已经在使用

Answer 1

在第一Row小部件设置mainAxisAlignment: MainAxisAlignment.spaceBetween,

      child: Column(
                children: [
                  //..
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        Show_It[index].author.toString(),
                      ),
                      Row(

更多关于布局

Answer 2

你应该采取两Row来实现你想要的。

1. 在第一Row你应该调用你的Text(Show_It[index].auther.toString(),)
2. 然后在第二Row中，您应该将两个图标都放在mainAxisAlignment:MainAxisAlignment.end中。

对于第一行和第二Row之间的间距，您应该放置mainAxisAlignment:MainAxisAlignment.spaceBetween

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
 Text(Show_It[index].auther.toString(),),
 ],),

Row(
mainAxisAlignment:MainAxisAlignment.end,
children:[
 IconButton(
icon:Icon(Icons.copy,),),
 IconButton(
icon:Icon(Icons.favorite,color:Colors.red,),),]

为了更好地理解行列备忘单go 与此。

PS：-如果有的话，请更正代码中缺少的括号！