在堆栈中对齐图像

问题描述 投票:0回答:1

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

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: () {},
                                            )
                                          )
                                  ])
flutter stack alignment flutter-layout
1个回答
0
投票

只需在堆栈内部的位置窗口小部件中定义窗口小部件。保持小部件水平居中

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

保持小部件垂直居中

Positioned(
    top : 0,
    bottom : 0,
    child : <your widget>,
)
© www.soinside.com 2019 - 2024. All rights reserved.