zoukankan      html  css  js  c++  java
  • flutter-container-容器

    //必须有封号  material就是个UI 
    import 'package:flutter/material.dart';
    //这是个主函数入口
    void main()=>runApp(MyApp());
    // 也可以这么写
    // void main(){
    //   runApp(MyApp())
    // }
    
    // 声明MyApp类
    class MyApp extends StatelessWidget{
      // 重写build
      @override
      Widget build(BuildContext context){
        //返回一个Material风格的App
        return MaterialApp(
          title:'Welcome to Flutteraa',
          home: Scaffold(
            // 在主题的中间区域,添加一个文本  Center:屏幕的中间
            body: Center(
              child: Container(
                child: Text("学习container",
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.blue[300],
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.solid,
                    decorationColor: Colors.blue[100],
                    fontWeight: FontWeight.w700
                  ),
                ),
                 200.0,
                height: 150.0,
                // 有decoration 就不能用color 相互冲突
                // color: Colors.red[50],
    
                //container里的对齐方式
                alignment: Alignment.topLeft,
                // 内边距  返回常量  所以要const
                padding: const EdgeInsets.fromLTRB(20.0, 30.0, 0.0 , 0.0),
                // 外边距
                //  margin: const EdgeInsets.all(10.0),
                decoration: BoxDecoration( //背景装饰
                  gradient:LinearGradient(colors: [Colors.red,Colors.orange[700]]),
                  borderRadius: BorderRadius.circular(3.0),
                  boxShadow: [
                    BoxShadow(color: Colors.black54,offset: Offset(2.0,2.0),blurRadius: 4.0)
                  ]
                ),
                //卡片倾斜
                transform: Matrix4.rotationZ(.2),
              ),
            ),
          ),
        );
      }
    }

    最终效果

  • 相关阅读:
    B.Little Sub and Triples
    A.Little Sub and Applese
    1003 超级无敌简单题[暴力打表]
    1002 人类史上最大最好的希望事件[前缀和]
    1001 hzy 和zsl 的生存挑战
    Computer Arrangement [经典贪心]
    Linux指令
    LInux
    Servlet
    El表达式与JSTL表达式
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13223808.html
Copyright © 2011-2022 走看看