时间戳

首页 > 解决方案 > 在一行中对齐 TextField 和 FlatButton

dart - 在一行中对齐 TextField 和 FlatButton

问题描述

我的以下代码工作正常，并在 TextField 下显示了 FlatButton：

import 'package:flutter/material.dart';

class LocationCapture extends StatelessWidget {
  LocationCapture(this.clickCallback, this.tc);
  final TextEditingController tc;
  final VoidCallback clickCallback;

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
      //    Row(
      //        children: <Widget>[
                TextField(controller: tc,),
                FlatButton(
                  child: const Icon(Icons.my_location),
                  onPressed: () => clickCallback(),
                )
      //    ])
    ]);
  }
}

我尝试将Row它们添加到单行中，但它不起作用，并且显示空白屏幕！

** 更新**

通过将每个元素包装到一个容器中，我能够将它们排成一行，但仍然对此不满意，因为它需要我分配容器宽度，我需要自动完成此操作：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
          width: 180,
          child: TextField(
              controller: tc,
              enabled: false,
              textAlign: TextAlign.center,
              decoration: InputDecoration.collapsed(hintText: "")
          )
      ),
      Container(
          child: FlatButton(
                 child: const Icon(Icons.my_location),
                 onPressed: () => clickCallback(),
          )
      ),
    ]
);

标签： dartflutter

解决方案

这就是你可以做到的。

Row()小部件的textDirection属性将允许您从提到的方向开始定位子小部件。

注意：- **如果您在项目中使用 MaterialApp() 小部件，您可以删除或注释掉“textDirection”。它负责 textDirection。

Expanded()小部件用于占用剩余的整个空间。

 child: Row(
            textDirection: TextDirection.rtl,
            children: <Widget>[
              FlatButton(onPressed: () {}, child: Text("Demo Button")),
              Expanded(child: TextFormField())
            ],
          )

推荐阅读