Question

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

   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: (){},
                    )
                    ),
                ],),

            ],
          ),)
        );
    }

上面的代码也尝试了不使用stack的情况，方法是使用带有扩展行的行，但是文本对齐方式出错，导致文本无法到达其扩展小部件n的中心

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(),
            ),
          )
        ],
      )
    ],
  ),
);

Answer 1

您可以尝试将Text和IconButton小部件居中放置。

    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: () {},
                            )),
                      ],
                    ),
                  ),
                ],
              ),

Answer 2

您可以尝试

appBar: PreferredSize(
    preferredSize: Size(null, 100),
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      child: ClipRRect(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15)
        ),
        child: Container(
          color: Colors.green,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.navigate_before,size: 40,),
              Text("Center",style: TextStyle(fontSize: 30),),
              Icon(Icons.navigate_before,color: Colors.transparent,),
            ],
          ),
        ),
      ),
    ),
  ),

具有背景形状和后退按钮的自定义工具栏

2 个答案: