Flutter Stack/Alignment

Flutter Stack/AlignmentStack组件的每一个子组件要么定位,要么不定位,定位的子组件是用Positioned组件包裹的。Stack组件本身包含所有不定位的子组件,子组件根据alignment属性定位(默认为左上角),然后根据定位的子组件的top、right、bottom和left属性将它们放置在Stack组件上。Stack组件的主要属性如下所示:
Flutter Stack/Alignment

采用Alignment方式布局的示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Stack布局示例Alignment',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = Stack(
      // 子组件左上角对齐
      alignment: Alignment.topLeft,
      children: <Widget>[
        // 底部添加一个头像
        CircleAvatar(
          backgroundImage: AssetImage('images/1.jpeg'),
          radius: 100.0,
        ),
        // 上面加一个容器,容器里再放一个文本
        Container(
          decoration: BoxDecoration(
              color: Colors.black38,
          ),
          child: Text(
                     '我是超级飞侠',
              style: TextStyle(
                fontSize: 22.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
          ),
            ),
          ],
        );
        return Scaffold(
          appBar: AppBar(
            title: Text('Stack层叠布局示例'),
          ),
          body: Center(
            child: stack,
          ),
        );
      }
    }

上述示例代码的视图展现大致如图所示,Stack子组件间是层叠关系,所以示例中文本会显示在图片之上。
Flutter Stack/Alignment

注意 示例中的图片可以使用之前使用的图片资源。

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!