代码之家  ›  专栏  ›  技术社区  ›  Boss Nass

在堆栈中对齐图像

  •  0
  • Boss Nass  · 技术社区  · 4 年前

    我正在尝试水平和垂直对齐堆栈中的图像,使其中心/中间对齐

    Stack(
                                          children: <Widget>[
                                            Container(
                                              height: 200,
                                              margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
                                              decoration: BoxDecoration(
                                                borderRadius: new BorderRadius.all(Radius.circular(16.0)),
                                                color: Colors.grey,
                                                image: DecorationImage(
                                                  fit: BoxFit.cover,
                                                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
                                                  image: new NetworkImage(["", null, false, 0].contains(merchant['assets']['backgroundimage_url']) ? '' : merchant['assets']['backgroundimage_url'])
                                                )
                                              ),
                                            ),
                                            Align(
                                              child:
                                                Column(
                                                  children: <Widget>[
                                                    merchant['assets']['logo_url'] != null ?
                                                      FadeInImage.assetNetwork(
                                                        image: merchant['assets']['logo_url'] != null ? merchant['assets']['logo_url'] : 'https://images.unsplash.com/photo-1446844805183-9f5af45f89ee',
                                                        placeholder: 'assets/images/transparent.png',
                                                        width: 150,
                                                        height: 150,
                                                        fit: BoxFit.contain)
                                                      :
                                                      Text(
                                                        merchant['name'],
                                                        style: GoogleFonts.nunito(
                                                          fontWeight: FontWeight.w700,
                                                          fontSize: 30,
                                                          textStyle: TextStyle(color: Colors.white, letterSpacing: .5),
                                                        ),
                                                        )],
                                                )
                                            ),
                                            if (merchant['promotions']['promo_text'] != null)
                                              Container(
                                                margin: EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
                                                child: FlatButton.icon(
                                                  shape: new RoundedRectangleBorder(
                                                      borderRadius: new BorderRadius.circular(18.0),
                                                      side: BorderSide(color: Colors.white)),
                                                  color: Color.fromRGBO(0, 0, 0, 0.5),
                                                  icon: Icon(Icons.local_offer),
                                                  label:
                                                      Padding(
                                                        padding: EdgeInsets.all(4.0),
                                                        child:
                                                        Text(
                                                          merchant['promotions']['promo_text'].toUpperCase(),
                                                          style: TextStyle(
                                                            fontSize: 14.0,
                                                          ),
                                                        ),
                                                      ),
                                                  textColor: Colors.white,
                                                  onPressed: () {},
                                                )
                                              )
                                      ])
    
    0 回复  |  直到 4 年前
        1
  •  0
  •   Sanket Vekariya    4 年前

    只需在堆栈中定义小部件就可以了。
    水平居中 :

    Positioned(
        left : 0,
        right : 0,
        child : <your widget>,
    )
    

    保留小部件

    Positioned(
        top : 0,
        bottom : 0,
        child : <your widget>,
    )