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
              ))           
            ],
          ),
        );
      }
    }
  • 相关阅读:
    第七课 GDB调试 (下)
    设计模式之原型模式
    设计模式之再读重构
    设计模式之代理模式
    设计模式之建造者模式
    设计模式之模板方法模式
    设计模式之抽象工厂模式
    设计模式之工厂模式
    设计模式之单例模式
    设计模式之6大原则
  • 原文地址:https://www.cnblogs.com/loaderman/p/11174388.html
Copyright © 2011-2022 走看看