在Flutter中，如何将小部件放置在Expanded小部件内的行中?

Question

我试图将小部件对齐到行内，但小部件自动对齐到中心。我想将小部件与行顶部对齐。

 Widget PlayerConnectWidget(double width,double height){
      return SingleChildScrollView(
          child: Container(

            margin: EdgeInsets.only(left: width*0.03,right: width*0.03,top: width*0.05),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Flexible(flex:1,fit:FlexFit.loose,child:MyFeedTile(),),
                    Flexible(flex:1,fit:FlexFit.loose,child:_logoContainer(width),),

                ],),
                SizedBox(height: width*0.02),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                   Expanded(flex: 7,child: Container(
                     margin: EdgeInsets.only(right: width*0.03),
                     padding: EdgeInsets.all(width*0.03),
                     decoration: BoxDecoration(color: Colors.white70,borderRadius: new BorderRadius.circular(12.0),),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: <Widget>[
                       Text('Venue'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Location'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Sports'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Opening Times'),
                         new Divider(
                           color: Colors.black87,
                         ),
                       Text('Notes'),
                         new Divider(
                           color: Colors.black87,
                         ),
                     ],),

                   ),),
                    Expanded(flex: 3, child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                    //  mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[

                      //  SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Message',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),),
                        SizedBox(height: width*0.02),
                        Container(
                          decoration: BoxDecoration(
                            color: MyColors.yellowBg,
                            borderRadius: new BorderRadius.circular(8.0),
                          ),
                          child:  FlatButton(
                              onPressed: (){
                              },
                              child: Text(
                                  'Continue',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.0,

                                  )
                              )
                          ),)
                      ],),)
                  ],)
              ],
            ),
          )
      );
    }


Widget _logoContainer(double width){
  return Container(
    margin: EdgeInsets.only(left:width*0.05),
    height: 110.0,
    width: 120.0,
    decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/cmp_click.png"),
          fit: BoxFit.fill,
        )
    ),
  );
}
Widget MyFeedTile(){
  return GestureDetector(
    onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => FeedView()),);
    },
    child: Container(
      padding: EdgeInsets.only(top:width*0.02,bottom: width*0.02),
      decoration: BoxDecoration(
        color: MyColors.colorPrimaryDark,
        borderRadius: new BorderRadius.circular(12.0),

      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Expanded(flex: 3,
            child: Container(
              //decoration: BoxDecoration(color: Colors.green[100]),
              height: 50,
              width: 50,
              margin: EdgeInsets.all(width*0.01),
              child: CircleAvatar(
                radius: 50.0,
                backgroundImage:
                NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,),),

          ),
          Expanded(flex: 7,child: Container(
            //decoration: BoxDecoration(color: Colors.green[100]),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text('User name',style: TextStyle(color: Colors.white,fontFamily: 'bold'),),
                SizedBox(height: width*0.01),
                Text('Time',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Location',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
                SizedBox(height: width*0.01),
                Text('Date',style: TextStyle(color: Colors.white,fontFamily: 'light'),),
              ],),),)
        ],),

    ),);
}

我得到了这个：

我试图实现这个：

和这个：

- Farhana Naaz Ansari

---

在两个主要的“Rows”中，添加“crossAxisAlignment: CrossAxisAlignment.start,” - anmol.majhail

Answer 1

您只需在代码中添加以下行：

crossAxisAlignment: CrossAxisAlignment.start

  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,

- Uttam Panchasara

Answer 2

对于 Row 和 Column，均有交叉轴对齐属性。

你现在使用的是主轴对齐方式。

Column 的主轴对齐方式是垂直对齐其子元素。

Row 的主轴对齐方式是水平对齐其子元素。

Column 的交叉轴对齐方式是水平对齐其子元素。

Row 的交叉轴对齐方式是垂直对齐其子元素。

因此，你可以尝试使用以下内容来对齐你的 Row：

crossAxisAlignment: CrossAxisAlignment.start,

- Lakhwinder Singh