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
              ))           
            ],
          ),
        );
      }
    }
  • 相关阅读:
    软件测试经典面试题汇总测试…(转载)
    loadrunner录制时弹出invalid application path
    【转】性能测试知多少:性能分析与…(转载)
    loadrunner小知识累积(转载)
    selenium定位方法总结
    [testng]Cannot find class in classpath
    java工程名前有红色感叹号
    jenkins slave节点问题总结
    scrapy爬虫框架
    Python监听鼠标键盘事件
  • 原文地址:https://www.cnblogs.com/loaderman/p/11174388.html
Copyright © 2011-2022 走看看