Question

  child: Stack(
          //alignment: Alignment.center,

          children: <Widget>[
            Container(
              alignment: Alignment.center,
              width: MediaQuery.of(mContext).size.width / 1.7,
              decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                gradient: LinearGradient(
                    colors: gradient,
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight),
              ),
              child: Text(title,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w500)),
              padding: EdgeInsets.only(top: 16, bottom: 16),
            ),



            Visibility(

              visible: isEndIconVisible,
              child: Padding(
                  padding: EdgeInsets.only(right: 10),
                  child: ImageIcon(
                    AssetImage("assets/ic_forward.png"),
                    size: 30,
                    color: Colors.white,
                  )),
            ),
          ],
        ),

我有一个按钮，该按钮应该位于屏幕中央。在按钮和向右箭头中心的文本。因为我希望按钮位于中心，所以我将对齐中心放在中间，因此向右箭头变为中心。谁能帮我解决这个问题？我还想知道我们将点击该按钮的位置。

Answer 1

您可以使用简单的行Widget来实现预期的ui。看下面的代码可能对您有帮助。

Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        width: MediaQuery.of(context).size.width / 1.7,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0)),
            color: Colors.red
          ,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("vdsv",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w500)),
            Visibility(
              visible: true,
              child: Padding(
                  padding: EdgeInsets.only(right: 10),
                  child: ImageIcon(
                    AssetImage("assets/images/logo.png"),
                    size: 30,
                    color: Colors.white,
                  )),
            ),
          ],
        ),
        padding: EdgeInsets.only(top: 16, bottom: 16),
      ),

    ],
  )

Answer 2

在可见性之前添加对齐

child: Stack(
      //alignment: Alignment.center,

      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: MediaQuery.of(mContext).size.width / 1.7,
          decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0)),
            gradient: LinearGradient(
                colors: gradient,
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Text(title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w500)),
          padding: EdgeInsets.only(top: 16, bottom: 16),
        ),


      Align(alignment: Alignment.topRight,
         child: Visibility(
          visible: isEndIconVisible,
          child: Padding(
              padding: EdgeInsets.only(right: 10),
              child: ImageIcon(
                AssetImage("assets/ic_forward.png"),
                size: 30,
                color: Colors.white,
              )),
        ),)
      ],
    ),

在抖动堆栈中对齐图像

2 个答案: