如何调整TextField的宽度？

Question

我正在重新编写一个简单的平均数计算应用程序。然而，我在TextField方面遇到了困难，我希望它的外观与第一张截图完全相同。

TextField的宽度被拉伸了，但我不想要这样的效果。我希望它的外观与截图完全一致。

期望的样子：

我的样子：

代码：

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';

class ArithmeticAverageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('arithmetic_average_title').tr(),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Card(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 20.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.help),
                      title: Text('arithmetic_average_help').tr(),
                      subtitle: Text('arithmetic_average_help_content').tr(),
                    )
                  ],
                ),
              ) 
            ),
            SizedBox(height: 16.0),
            Card(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Text('arithmetic_average_your_grades', style: Theme.of(context).textTheme.headline5).tr(),
                    SizedBox(height: 16.0),
                    Text('arithmetic_average_grades_one_at_a_time', style: Theme.of(context).textTheme.headline6,).tr(),
                    SizedBox(height: 16.0),
                    Text('arithmetic_average_grade', style: Theme.of(context).textTheme.subtitle2).tr(),
                    TextField()
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

- szakes1

Answer 1

这将帮助您在所有设备上创建通用宽度，因此这里的width * 0.3表示它将占据屏幕宽度的30％。

 Container(
          width: MediaQuery.of(context).size.width * 0.3,
          child: TextField(),
        )

- Jitesh Mohite

Answer 2

使用Row Widget，将Expanded Widget作为子Widget，并在其中放置您的小部件，因为Expanded将占用相等的空间。

return Row(
  children: [
    Expanded(
       child: TextField();
    ),
    Expanded(
       child: Button();
    )
  ],
);

- Jay Dangar

Answer 3

每当你想要调整高度和宽度时，可以使用小部件 Container。如果你想要调整一个在当前小部件中无法找到的属性，可以将其包裹在具有该属性的小部件中来帮助你。

Container(
  margin: const EdgeInsets.only(right: 150),
  child: new TextField(
  decoration: new InputDecoration(
    hintText: 'Grade',
   )
  )
 )

- Dureksha Wasala

Answer 4

你可以尝试使用两个Flexible小部件将你的TextField和Button包装起来，并应用所需的比例，例如1:2，这将给你以下结果：

                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

你也可以用SizedBox来代替第一个 Flexible 并设置一个精确的值，例如：

                Row(
                  children: [
                    SizedBox(
                      width: 100.0,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

TextField没有固定的尺寸（宽度）约束，因此它将始终尝试占据所有水平空间。使用Flexible可以将其约束为Row中所需的宽度。

完整示例在DartPad上。

- Dominik Roszkowski