如何在同一级别上对齐TextField和Text [英] How to align a TextField and a Text on the same level

问题描述

我正在尝试使用 Row 将水平底部的1 Text 和1 TextField 值对齐，但是将 TextField 值始终高于左侧的 Text .

即使字体大小更大，是否也可以将水平底部的 Text 和 TextField 值对齐?

这是我的代码和

I'm trying to align horizontal bottom 1 Text and 1 TextField value using Row, but TextField value always higher than the left Text.

is it possible to align horizontal bottom Text and TextField value even when the font-size more bigger ?

Here are my code and screenshot:

body: Column(  
            children: <Widget>[
                    Row(
                    children: <Widget>[
                        Text('Number 1 : '),
                        Expanded(
                            child:
                            TextField(
                                textAlign: TextAlign.start,
                                textAlignVertical: TextAlignVertical.bottom,
                                textCapitalization: TextCapitalization.sentences,
                                maxLength: 10,
                            ),
                        ),  

                    ]),

                ],
            )

解决方案

You should set textBaseline and crossAxisAlignment for Row.

Row(
    crossAxisAlignment: CrossAxisAlignment.baseline, // <--
    textBaseline: TextBaseline.alphabetic, // <--
    children: <Widget>[
        Text('Number 1 : '),
    ...

It will look like this

这篇关于如何在同一级别上对齐TextField和Text的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！