代码之家  ›  专栏  ›  技术社区  ›  Hasan A Yousef Michael Benjamin

行中对齐文本字段和扁平按钮

  •  0
  • Hasan A Yousef Michael Benjamin  · 技术社区  · 6 年前

    下面的代码工作正常,并在文本字段下显示按钮:

    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(),
              )
          ),
        ]
    );
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Dhrumil Shah - dhuma1981    6 年前

    这就是你能做到的。

    文本方向 性质 行() 小部件将允许您从上述方向开始定位子部件。

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

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