android - flutter :将所有小部件排列成行

Question

我正在设计登录页面，其中存在一个问题，TextField 没有沿分隔线显示。

   new Expanded(
     child: new Container(//DCFFF9
     margin: const EdgeInsets.only(top: 20.0),
     padding: const EdgeInsets.all(10.0),
     width: 600.0,height: 60.0,
     decoration: new BoxDecoration(
     color: Colors.white30,),
  child: new Row(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     mainAxisSize: MainAxisSize.max,
     children: <Widget>[
             new Image.asset('assets/images/avatar.png'),
             new Container(height: 90.0, width: 1.0,
                   color: new Color(0xFFEDEDED),                          
                   margin: const EdgeInsets.only(left: 15.0, right: 15.0)
                           ),
                   new TextField(
                     keyboardType: TextInputType.text,
                     style:new TextStyle( fontFamily: "WorkSansLight",
                                fontSize: 30.0,
                                color: Colors.white70),
                                decoration:new InputDecoration(
                                          border: InputBorder.none,
                                          hintText: "USER NAME",
                                          hintStyle:new TextStyle(
                                          color: Colors.white70 ,
                                          fontFamily: "WorkSansLight", fontSize: 30.0),
                                              ),   ), ], )))

Answer 1

尝试将您的Row 小部件放在Expanded 中。

Expanded(flex: 0, child: Image.asset('assets/images/avatar.png')),
Expanded(
    flex: 0,
    child: Container(
    height: 90.0,
    width: 1,
    color: new Color(0xFFEDEDED))),
Expanded(
    flex: 1,
    child: Container(
        child: TextField(
             keyboardType: TextInputType.text,
                 style: new TextStyle(
                 fontFamily: "WorkSansLight",
                 fontSize: 30.0,
                 color: Colors.white70),
                 decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: "USER NAME",
                          hintStyle: new TextStyle(
                              color: Colors.black,
                              fontFamily: "WorkSansLight",
                              fontSize: 30.0)))))