Flutter页面布局Stack 层叠组件及与Align、Positioned实现定位布局

Torie ·

更新时间:2024-11-14

· 663 次阅读

Stack组件

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            height: 200,
            width: 200,
            color: Colors.red,
          ),
          Text("我是一个文本")
        ],
      ),
    );
  }
}

显示效果：

Stack 层叠组件与Align结合使用
//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.red,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: Icon(
                Icons.satellite,
                color: Colors.white,
                size: 50,
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Icon(
                Icons.home,
                color: Colors.white,
                size: 50,
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(
                Icons.settings,
                color: Colors.white,
                size: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

实现效果：

Stack 层叠组件与Positioned结合使用
//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.red,
        child: Stack(
          children: [
            Positioned(
              top: 0,
              left: 125,
              child: Icon(
                Icons.satellite,
                color: Colors.white,
                size: 50,
              ),
            ),
            Positioned(
              top: 125,
              left: 125,
              child: Icon(
                Icons.home,
                color: Colors.white,
                size: 50,
              ),
            ),
            Positioned(
              bottom: 0,
              left: 125,
              child: Icon(
                Icons.settings,
                color: Colors.white,
                size: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

实现效果：


作者：蓝枫amy
                    
 
                

                            stack
                            align
                            flutter
                            定位