在flutter中设计一个标题在左侧的输入框

在Flutter中设计一个标题在左侧的输入框，你可以使用`Row`和`Expanded`来实现。以下是一个简单的示例代码：

Container(
  padding: EdgeInsets.symmetric(horizontal: 10.0),
  child: Row(
    children: <Widget>[
      Text(
        '标题',
        style: TextStyle(fontSize: 16.0),
      ),
      Expanded(
        child: TextFormField(
          decoration: InputDecoration(
            hintText: '请输入内容',
            border: InputBorder.none,
          ),
        ),
      ),
    ],
  ),
)

在这个示例中，我们使用`Container`包装了`Row`来添加一些内边距。然后我们在`Row`中添加了一个`Text`小部件来显示标题，以及一个`Expanded`小部件来包装`TextFormField`小部件，以便让输入框占据剩余的空间。最后，我们在`TextFormField`中设置了`InputDecoration`来去除输入框的边框。

相关问题

在flutter中设计一个标题在左侧的输入框，标题和输入框间距为10，均为白色字体，标题和输入框下方有下划线

可以使用`Container`和`TextField`来实现这个布局。具体代码如下：

Container(
  margin: EdgeInsets.only(left: 10.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        '标题',
        style: TextStyle(
          color: Colors.white,
          fontSize: 16.0,
        ),
      ),
      SizedBox(height: 10.0),
      TextField(
        style: TextStyle(
          color: Colors.white,
          fontSize: 16.0,
        ),
        decoration: InputDecoration(
          border: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.white,
            ),
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.white,
            ),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.white,
            ),
          ),
          hintText: '请输入内容',
          hintStyle: TextStyle(
            color: Colors.white,
            fontSize: 16.0,
          ),
        ),
      ),
    ],
  ),
);

在上面的代码中，我们使用了`Container`作为父容器，并给它设置了`margin`属性来实现标题和输入框之间的距离。接着，我们使用`Column`来将标题和输入框垂直排列，并设置了`crossAxisAlignment`为`CrossAxisAlignment.start`，使得它们左对齐。然后，我们分别使用`Text`和`TextField`来显示标题和输入框，并设置了它们的样式。最后，我们使用`InputDecoration`来设置输入框的边框和提示文本的样式，并将其传递给`TextField`的`decoration`属性。

使用flutter设计一个宽500高300的容器；内部第一行左侧为一个图标和文字，距离左边30，右侧为一个蓝色文字距离右边30，第二行居中为稍大一些的文字，第三行左侧为带标题的输入框，距离左边30，右侧为带标题输入框，距离右边30

好的，以下是Flutter代码实现：

Container(
  width: 500.0,
  height: 300.0,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 30.0),
            child: Icon(Icons.info),
          ),
          Text(
            '信息',
            style: TextStyle(fontSize: 18.0),
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.only(right: 30.0),
            child: Text(
              '编辑',
              style: TextStyle(color: Colors.blue),
            ),
          ),
        ],
      ),
      SizedBox(
        height: 20.0,
      ),
      Center(
        child: Text(
          '稍大一些的文字',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      SizedBox(
        height: 20.0,
      ),
      Row(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('输入框1标题'),
                SizedBox(
                  height: 5.0,
                ),
                TextField(
                  decoration: InputDecoration(
                    hintText: '请输入内容',
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            width: 50.0,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('输入框2标题'),
                SizedBox(
                  height: 5.0,
                ),
                TextField(
                  decoration: InputDecoration(
                    hintText: '请输入内容',
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ],
  ),
);

希望能够满足您的需求。如果需要更改样式，可以根据需要进行调整。