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),
              ),
            ),
          ),
        );
      }
    }

    最终效果

  • 相关阅读:
    client offset screen 的区别
    js中const,var,let区别
    jquery的选择器
    gulp
    JS 实现图片放大效果
    html单个标签实现跑马灯效果
    前端之HTML知识点整理
    各种纯css图标
    防止反复点击的思路
    .NET Memcached Client 扩展获取所有缓存Key
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13223808.html
Copyright © 2011-2022 走看看