zoukankan      html  css  js  c++  java
  • Flutter中的Stack、Align、Positioned的使用

    import 'package:flutter/material.dart';
    import 'package:flutter_testdemo001/res/listData.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("flutter demo"),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // return Center(
        //   child: Stack(
        //     alignment: Alignment.center,
        //     children: <Widget>[
        //       Container(
        //         height: 400,
        //          300,
        //         color: Colors.red,
        //       ),
        //       Text("我是一个文本", style: TextStyle(fontSize: 20, color: Colors.white))
        //     ],
        //   ),
        // );
    
        return Center(
          child: Container(
            height: 400,
             300,
            color: Colors.red,
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.topLeft,
                  child: Icon(Icons.home,size:40,color: Colors.white),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Icon(Icons.block,size:40,color: Colors.white),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Icon(Icons.search,size:40,color: Colors.white),
                ),
              ],
            ),
          ),
        );
      }
    }
  • 相关阅读:
    142. 环形链表 II
    59. 螺旋矩阵 II
    996. 正方形数组的数目
    1323. 6 和 9 组成的最大数字
    面试题 17.14. 最小K个数
    389. 找不同
    1103. 分糖果 II
    背景透明度
    css3-新属性-用户界面
    响应式布局-基础结构
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11724470.html
Copyright © 2011-2022 走看看