文章目录

  • Flutter 基础布局 Stack Widget
    • Stack 布局
    • Stack与Alignment
    • Stack与Positioned
    • IndexedStack

 

 
Flutter 基础布局 Stack Widget

Stack Widget布局类似于Android里的FrameLayout，里面的控件是按照先后顺序堆叠在一起的，有层级关系。

Stack 布局

我们可以看到布局都是叠在一起的。

  Stack(
    children: <Widget>[
      Container(
        width: 300,
        height: 300,
        color: Colors.grey,
      ),
      Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.teal,
      ),
      Text(
        "Stack",
        style: TextStyle(color: Colors.white),
      )
    ],
  ),
  • 示例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StackExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return StackExampleState();
  }
}

class StackExampleState extends State<StatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stack Widget"),
        primary: true,
      ),
      body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                width: 300,
                height: 300,
                color: Colors.grey,
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.teal,
              ),
              Text(
                "Stack",
                style: TextStyle(color: Colors.white),
              )
            ],
          ),
        ],
      ),
    );
  }
}

Flutter 基础布局 Stack Widget_布局

Stack与Alignment

Stack组件的每一个子组件要么定位，要么不定位，Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StackAlignmentExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "StackAlignmentExample",
      home: Scaffold(
        appBar: AppBar(
          title: Text("StackAlignmentExample"),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.topLeft,
            children: [
              CircleAvatar(
                backgroundImage: AssetImage("images/1.jpg"),
                radius: 100.0,
              ),
              Container(
                decoration: BoxDecoration(color: Colors.black38),
                child: Text(
                  "StackAlignment",
                  style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter 基础布局 Stack Widget_跨平台_02

Stack与Positioned

Positioned组件用来定位的，Stack使用Positioned布局主要是因为在Stack组件里面需要包裹一个定位组件。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StackPositionedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "StackPositionedExample",
      home: Scaffold(
        appBar: AppBar(
          title: Text("StackPositionedExample"),
        ),
        body: Center(
          child: Stack(
            children: [
              Image.asset("images/1.jpg"),
              Positioned(
                  bottom: 50.0,
                  right: 50.0,
                  child: Text(
                    "StackPositioned",
                    style: TextStyle(
                        fontSize: 30.0,
                        fontWeight: FontWeight.bold,
                        fontFamily: "serif",
                        color: Colors.white),
                  ))
            ],
          ),
        ),
      ),
    );
  }
}

Flutter 基础布局 Stack Widget_布局_03

IndexedStack

IndexedStack继承自Stack，它的作用是显示第index个child，其他child都是不可见的所以IndexedStack的尺寸永远是和最大的子节点尺寸一致。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class IndexedStackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "IndexedStackExample",
      home: Scaffold(
        appBar: AppBar(
          title: Text("IndexedStackExample"),
        ),
        body: Center(
          child: IndexedStack(
            index: 0,
            alignment: Alignment.topLeft,
            children: [
              CircleAvatar(
                backgroundImage: AssetImage("images/1.jpg"),
                radius: 100.0,
              ),
              Container(
                decoration: BoxDecoration(color: Colors.black38),
                child: Text(
                  "IndexedStack",
                  style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  • 可以看到文字不见了

Flutter 基础布局 Stack Widget_Flutter_04