我正在制作具有背景形状的自定义工具栏,但是我的“后退”按钮可以正确对齐文本

   Widget _toolBar(String headerText){

        return Container(
          decoration: BoxDecoration(
              color: MyColors.greenHeader,
              borderRadius: new BorderRadius.only(
                  bottomLeft: const Radius.circular(15.0),
                  bottomRight: const Radius.circular(15.0))
          ),
          child:Center(child:  Stack(
            children: <Widget>[

              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child:Text(headerText,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                        )
                    ),),
                ],),

              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Flexible(
                    flex: 1,
                    child:IconButton(
                      icon: new Icon(Icons.arrow_back_ios),
                      color: Colors.white,
                      onPressed: (){},
                    )
                    ),
                ],),

            ],
          ),)
        );
    }

上面的代码也尝试通过使用Row扩展而没有stack的情况,但文本对齐方式出错,导致文本无法到达其扩展小部件n

android - 具有背景形状和后退按钮的自定义工具栏-LMLPHP
return Scaffold(
  body: Stack(
    children: <Widget>[
      Container(
        decoration: _buildBackground(),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            flex: 13,
            child:_toolBar('VENUE LOGIN')
          ),
          Expanded(
            flex: 87,
            child: Container(
              child: LoginBody(),
            ),
          )
        ],
      )
    ],
  ),
);

最佳答案

您可以尝试将TextIconButton小部件居中。

    Stack(
                children: <Widget>[
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: Text(headerText,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 18.0,
                              )),
                        ),
                      ],
                    ),
                  ),
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Flexible(
                            flex: 1,
                            child: IconButton(
                              icon: new Icon(Icons.arrow_back_ios),
                              color: Colors.white,
                              onPressed: () {},
                            )),
                      ],
                    ),
                  ),
                ],
              ),

10-08 03:43
查看更多