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
              ))           
            ],
          ),
        );
      }
    }
  • 相关阅读:
    分析问题的方法
    听听冯洛伊曼的概念机器的齿轮声
    Nginx支持WebSocket配置
    原型模式
    redis日志位置
    修改centos7远程端口和nginx安全设置
    Java输出小端二进制文件
    centos7安装Java8
    Nginx教程
    centos7.6安装postgresql10
  • 原文地址:https://www.cnblogs.com/loaderman/p/11174388.html
Copyright © 2011-2022 走看看