Jak umístit 2 obrázky v jednom místě Flutter

0

Otázka

Jsem úplně nový flutter a musím udělat něco, jako je tohle.

this

A na druhou část, moje pravá obrázek je vyroben z levého obrázku a další obrázek, který je modré barvy.

Nenechte se zmást! Budu vysvětlovat v lepším způsobem: za prvé, musím místo, kde tyto 2 obrázky řádek(něco jako FrameLayout v android)

A Správný obrázek byl vyroben z obrázku, který je vlevo obraz A jiné barvy obrazu(Obraz, který má pouze 1 barva)

Doufám, že máš to

flutter flutter-layout image
2021-11-23 11:08:44
2

Nejlepší odpověď

1

Pokud váš problém je o dva překrývající se widgety, můžete použít Stack zvládnout to.

2021-11-23 11:16:23

@AmirAndroidDeveloper můžete použít Umístěna dítě jako děti ze Zásobníku a nastavte horní, pravý, ...
M Karimi
1

Můžete použít Stack s Positioned k tomu: Zde je Příklad s ikonami:

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          // alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              new Positioned(
                left: 20.0,
                child: new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              ),
              new Positioned(
                left:40.0,
                child: new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              )

            ],
          ),
        ),
      )
    ;
  }
}


class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          // alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                child: new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              new Positioned(
                left: 20.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                  child: new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              ),
              new Positioned(
                left:40.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                )
                  ,child: new Icon(Icons.notifications, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              )

            ],
          ),
        ),
      )
    ;
  }
}
2021-11-23 11:28:32

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................