Flutter UI 기초-레이 어드 레이아웃 Stack 사용

원형 그림 에 배경 이 있 는 텍스트 를 추가 합 니 다.Row Widget 이나 Column Widget 을 사용 하면 실현 할 수 없습니다.이 럴 때 Stack Widget,즉 레이 어드 레이아웃 을 사용 해 야 합 니 다.직접 코드 올 리 기:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Widget'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: Mystack(),
        ),
      ),
    );
  }
}

class Mystack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554199381&di=e3a6604c718d6304e4912f5a7d8e6d2f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.11665.com%2Fimg1_p3%2Fi3%2F1918445441%2FTB20kv.dlDH8KJjSszcXXbDTFXa_%21%211918445441.jpg'),
          radius: 100,
        ),
        Container(
          child: Text(
            '  —  ',
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
          decoration: BoxDecoration(color: Colors.blueAccent),
          padding: EdgeInsets.fromLTRB(5.0, 0, 5.0, 0),
        )
      ],
      alignment: const FractionalOffset(0.5, 0.9),
    );
  }
}

코드 분석:Mystack클래스 가 되 돌아 오 는 구성 요 소 는Stack()입 니 다.구성 요소 배열 도 필요 합 니 다.여기 서 우 리 는CircleAvatar과Container를 사용 했다.컨테이너 용기 구성 요소,텍스트 구성 요소)
CircleAvatar 구성 요소CircleAvatar구성 요 소 는 이미지 컨트롤 에 자주 사 용 됩 니 다.구성 요소 안에 radius 의 값 이 있 으 면 그림 의 라디에이터 를 설정 할 수 있 습 니 다.지금 우 리 는 그림 을 넣 은 후에 호 도 를 100 으로 설정 하여 아름 다운 원형 을 만 들 려 고 합 니 다.코드 는 다음 과 같 습 니 다.

CircleAvatar(
    backgroundImage: NetworkImage( 'url'),
    radius: 100,
),

레이 어드 레이아웃 의 alignment 속성alignment: const FractionalOffset(0.5, 0.9),alignment 속성 은 레이 어드 위 치 를 제어 하 는 것 이 므 로 두 가지 내용 을 레이 어드 할 때 사용 하 는 것 을 권장 합 니 다.그것 은 두 개의 값 X 축 거리 와 Y 축 거 리 를 가지 고 있 으 며,값 은 0 에서 1 까지 이 며,모두 상층 용기 의 왼쪽 상단 에서 부터 계산한다.
위치 속성
두 구성 요소 의 중첩 을 초과 하면 alignment 속성 은 수 요 를 만족 시 키 지 못 하고 Positioned 속성 을 사용 해 야 합 니 다.그래서 이 구성 요 소 는 레이 어드 포 지 셔 닝 구성 요소 라 고도 합 니 다.

bottom:레이 어드 구성 요소 아래 거리

left:레이 어드 구성 요소 왼쪽 거리

top:레이 어드 구성 요소 상단 의 거리

right:레이 어드 구성 요소 오른쪽 거리

width:레이 어드 포 지 셔 닝 구성 요소 의 너비

height:포 지 셔 닝 구성 요소 의 높이 예제 코드:

class Mystack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554199381&di=e3a6604c718d6304e4912f5a7d8e6d2f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.11665.com%2Fimg1_p3%2Fi3%2F1918445441%2FTB20kv.dlDH8KJjSszcXXbDTFXa_%21%211918445441.jpg'),
          radius: 100,
        ),
        Positioned(
            top: 20.0,
            left: 50.0,
            child: Container(
              child: Text(
                '  —  ',
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
              decoration: BoxDecoration(color: Colors.blueAccent),
              padding: EdgeInsets.fromLTRB(5.0, 0, 5.0, 0),
            )),
        Positioned(
          child: Text(
            '    ',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          bottom: 10,
          right: 60,
        )
      ],
//      alignment: const FractionalOffset(0.5, 0.9),
    );
  }
}