flutter - 如何在一行中对齐不同大小的文本

问题描述

我需要做这张卡

其实我已经做了这个

但是如您所见，“Dominio”一词与蓝色文本不对齐，我想对齐这两个文本，我尝试了Align Text of different size in row to bottom的解决方案，但我没有成功。

这是我正在使用的代码

Container(
   padding: EdgeInsets.fromLTRB(10.0, 10.0, 5.0, 10.0),
   height: size.height*0.1,
   width: size.width*0.9,
   decoration: BoxDecoration(
     color: Colors.white,
     border: Border.all(color: Colors.black38),
     borderRadius: BorderRadius.circular(5.0),
     boxShadow: <BoxShadow>[
        BoxShadow(
           color: Colors.black26,
        )
     ]
   ),
   child: Row(        
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         CircleAvatar(
             radius:26,
             backgroundImage: AssetImage('assets/no-image.png'),          
         ),
         SizedBox(width: 8.0),
         Expanded(child: Text(techn.technology, style: TextStyle(color: Colors.blue, fontSize: 19))),    
         Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
               Text('Dominio', ),
               SizedBox(width: 5.0),
               _domainPercentage(_textController,  techn.technologyId, ),
               SizedBox(width: 5.0),
               GestureDetector(
                  child: Icon(Icons.clear, color: Colors.red),
                  onTap: () {
                     setState(() {  
                       _seleccion = null;
                     });
                  }
               )
            ],
         ),
      ],
   ),
);

Widget _domainPercentage(TextEditingController _controller, String tech, ){    
    Radius radius = Radius.circular(3.0);
    return Row(
      children: <Widget>[
         Container(
          height: 24,
          width: 45,
          decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.horizontal(left: radius)
          ),
          child: Container(
            padding: EdgeInsets.only(left:5),
            margin: EdgeInsets.fromLTRB(0.9, 1, 0, 1),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.horizontal(left: radius),
              color: Colors.white
            ),
            child: Row(             
              children: <Widget>[
                Flexible(
                  child: TextFormField(
                    controller: _controller,
                    style: TextStyle(fontSize: 14),
                    textAlign: TextAlign.center ,
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      BlacklistingTextInputFormatter(RegExp('[.]')),
                      LengthLimitingTextInputFormatter(3)
                    ],
                    decoration: InputDecoration(
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    ),                    
                  ),
                ),
                Text('%'),
              ],
            ),
          )
        ),
        GestureDetector(
          onTap:  (!(_controller.text.isNotEmpty && _controller.text != '0')) 
          ? ()  {
            _registerTechnology(_controller, tech);                      
          }          
          : null,                         
          child: Container(
             height: 24,
             decoration: BoxDecoration(
                border: Border.all(color: Colors.orangeAccent),
                borderRadius: BorderRadius.horizontal(right: radius)
             ),
          child: Icon(Icons.edit, color: Colors.orangeAccent,),
        ),
      )
    ],
  );    
 }

提前致谢。

标签： flutterflutter-layout

flutter - 如何在一行中对齐不同大小的文本

问题描述

解决方案

推荐阅读