颤动: ListTile宽度

Question

我让下面的代码在同一行中显示2个ListTiles：

Row(
                children: <Widget>[
                  Flexible(
                    child: ListTile(
                      leading: Icon(Icons.call),
                      title: TextFormField(
                        controller: _phoneNumberController,
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                            hintText: translate('contact_list.number')),
                        validator: (value) {
                          return Helpers.checkInput(value);
                        },
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListTile(
                      title: TextFormField(
                        controller: _phoneNumberController,
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                            hintText: translate('contact_list.number')),
                        validator: (value) {
                          return Helpers.checkInput(value);
                        },
                      ),
                    ),
                  ),
                ],
              ),

他们两个都占用了50%的空间，但我需要第一个占用固定的宽度。

我正在尝试归档的是显示一个电话号码输入，其电话代码在左侧(这需要更小)

Answer 1

对于您正在寻找的内容，这可能是一个可能的解决方案：

Row(
  children: <Widget>[
    ConstrainedBox(
      constraints: BoxConstraints(
        /// Just an example, but this makes sure, that since you set a fixed width like 300.0, on small screens this won't get too big. For example by setting a maxWidth constraint like this, its width will be 300.0, but at max as big as 1 / 3 of the screen width so it gets smaller on small screen sizes
        maxWidth: MediaQuery.of(context).size.width / 3,
      ),
      child: SizedBox(
        /// Enter your fixed width here, 300.0 ist just an example
        width: 300.0,
        child: ListTile(
          leading: Icon(Icons.call),
          title: TextFormField(
            controller: _phoneNumberController,
            keyboardType: TextInputType.phone,
            decoration: InputDecoration(
                hintText: translate('contact_list.number')),
            validator: (value) {
              return Helpers.checkInput(value);
            },
          ),
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: TextFormField(
          controller: _phoneNumberController,
          keyboardType: TextInputType.phone,
          decoration: InputDecoration(
              hintText: translate('contact_list.number')),
          validator: (value) {
            return Helpers.checkInput(value);
          },
        ),
      ),
    ),
  ],
),