Flutter：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);
          },
        ),
      ),
    ),
  ],
),

Answer 2

这也可以将 ListTile 包装在容器小部件中

Container {
   width: 600,
   child: ListTile(...)
}