【问题标题】:Aligning multiple text objects in flutter issue在颤动问题中对齐多个文本对象
【发布时间】:2019-02-16 02:01:58
【问题描述】:

我需要在颤动中对齐多个文本对象。当我嵌套容器时,文本在屏幕上的每个容器都会缩进一点。我想如果我为每个 Text 对象创建一个容器,我可以单独控制每个对象的填充并将它们排列在左侧,但每个对象都缩进。

class MemberProfile extends StatelessWidget {

       @override
      Widget build(BuildContext context){
    return new Scaffold(
          appBar: new LBAppBar().getAppBar(),
          drawer: new LBDrawer().getDrawer(),
         body: Container(
        decoration: BoxDecoration(
        gradient: new LinearGradient(
            colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight
        )
    ),
     child: new Column(
      mainAxisAlignment: MainAxisAlignment.start,    
      children:[
        Row(
                children: [
              Container(
                margin: EdgeInsets.only(left: 0.0,top: 0.0, bottom: 0.0, right:0.0),
                child: Column(
      children: <Widget>[



            Container(  
                margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Name : Sam Cromer", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )),
            ),

            Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Sex : Male", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

                 Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Age : 42", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

  Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Status : Divorced", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

                 Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Tramatic Event : ", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Motorcycle Accident July 2005, TBI", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

 Container(  margin: EdgeInsets.only(left: 0.0,top: 10.0, bottom: 10.0, right:0.0),
                child:  Text("Bio :", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0 )) ),

   Container(
             margin: EdgeInsets.only(left: 30.0,top: 100.0, bottom: 30.0, right:30.0),
              child: Row(
             mainAxisAlignment: MainAxisAlignment.end,
               children: <Widget> [ 

                  Container(
         margin: EdgeInsets.all(20.0),
        child:OutlineButton(
        child: Text('Offer support'), textColor: Colors.white,
          shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
          onPressed: (){
          // Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new CheckInQ()));
        }
        )
         )





               ]

            )
          )

    ],

  ),
                  ),
                    ]
            ),


            ],
            ),
          //here


         )


       );



}
} 

我得到的结果是每个对象的缩进文本。他们都没有对齐

【问题讨论】:

  • 您希望它们居中对齐还是左对齐?

标签: dart flutter


【解决方案1】:

基本上你有一些额外的位置不必要的组件,我也删除了其他不必要的东西。

这里是完整的代码:

class MemberProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  LBAppBar().getAppBar(),
      drawer:  LBDrawer().getDrawer(),
      body: ListView(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
              ),
            ),
            child: Container(
              child: Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                    child: Text("Name : Sam Cromer",
                        style: TextStyle(
                            color: Colors.white70,
                            fontWeight: FontWeight.bold,
                            fontSize: 19.0)),
                  ),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Sex : Male",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Age : 42",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Status : Divorced",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Tramatic Event : ",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Motorcycle Accident July 2005, TBI",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Text("Bio :",
                          style: TextStyle(
                              color: Colors.white70,
                              fontWeight: FontWeight.bold,
                              fontSize: 19.0))),
                  Container(
                    margin: EdgeInsets.only(
                        left: 30.0, top: 100.0, bottom: 30.0, right: 30.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.all(20.0),
                          child: OutlineButton(
                            child: Text('Offer support'),
                            textColor: Colors.white,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30.0)),
                            onPressed: () {
                              // Navigator.of(context).push( MaterialPageRoute(builder: (BuildContext context) =>  CheckInQ()));
                            },
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            //here
          ),
        ],
      ),
    );
  }
}

【讨论】:

  • 谢谢,这是居中对齐,如何将它们向左对齐?
  • 我可以通过将 crossAxisAlignment: CrossAxisAlignment.start 添加到列来将它们左对齐。感谢您的帮助!
猜你喜欢
  • 2021-07-04
  • 1970-01-01
  • 2010-11-10
  • 2020-01-21
  • 1970-01-01
  • 2022-10-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多