zoukankan      html  css  js  c++  java
  • Flutter 页面布局 Stack层叠组件

    Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局

     

    属性

    说明

    alignment

    配置所有子元素的显示位置
    

    children

    子组件

    Stack 组件中结合 Positioned 组件可以控制每个子元素的显示位置

    属性

    说明

    top

    子元素距离顶部的距离

    bottom

    子元素距离底部的距离

    left

    子元素距离左侧距离

    right

    子元素距离右侧距离

    child

    子组件

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutDemo(),
        ));
      }
    }
    
    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child:  Container(
                height: 400,
                 300,
                color: Colors.red,
                child: Stack(
                  // alignment: Alignment.center,
                  children: <Widget>[
                    Positioned(
                    //  left: 10,
                      child: Icon(Icons.home,size: 40,color: Colors.white),
                    ),
                    Positioned(
                     bottom: 0,
                     left: 100,
                      child: Icon(Icons.search,size: 30,color: Colors.white),
                    ),
                    Positioned(
                      right: 0,
                      child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
                    )
                  ],
                ),
          ),
        );
      }
    }

    Stack 组件中结合 Align 组件可以控制每个子元素的显示位置

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutDemo(),
        ));
      }
    }
    
    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child:  Container(
                height: 400,
                 300,
                color: Colors.red,
                child: Stack(
                  // alignment: Alignment.center,
                  children: <Widget>[
                    Align(
                      alignment: Alignment(1,-0.2),
                      child: Icon(Icons.home,size: 40,color: Colors.white),
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: Icon(Icons.search,size: 30,color: Colors.white),
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
                    )
                  ],
                ),
          ),
        );
      }
    }
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutDemo(),
        ));
      }
    }
    
    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: Stack(
            alignment: Alignment.topLeft,
            children: <Widget>[              
              Container(
                height: 400,
                 300,
                color: Colors.red,
              ),
              Text('我是一个文本',style: TextStyle(
                fontSize: 40,
                color: Colors.white
              ))           
            ],
          ),
        );
      }
    }
  • 相关阅读:
    基于PHP的正则表达式
    学习笔记---C/C++语法
    Stack的c实现
    回忆过去的两年
    学习笔记---计算机组成
    The shortest path---hdu2224 && Tour---poj2677(旅行商问题)
    Ubantu Linux 环境下编译c++程序
    Quoit Design---hdu1007(最近点对问题 分治法)
    Wrestling Match---hdu5971(2016CCPC大连 染色法判断是否是二分图)
    异或密码---hdu5968(CCPC合肥,二分)
  • 原文地址:https://www.cnblogs.com/loaderman/p/11174388.html
Copyright © 2011-2022 走看看