zoukankan      html  css  js  c++  java
  • flutter Widget基础

    MaterialApp - 

     
     

    Scaffold - 脚手架控件

      

    AppBar - 导航栏

    AppBar(
      title: Text('FirstPage'),
      elevation: 0.0, // header 下面的边线显示,值越大显示越明显
    ),

    参数说明:

    • title:标题,String
    • elevation:下边线,数字类型,值越大显示越明显

    ExpansionTile - 展开闭合控件

    ExpansionTile(
      title: Text('Expansion Tile'),
      leading: Icon(Icons.ac_unit),
      backgroundColor: Colors.white12,
      children: <Widget>[],
    )

    参数说明:

    • title:标题,String
    • leading:左面内容(一般设置为icon)
    • backgroundColor:打开控件后的背景色
    • children:控件中显示的内容,List

    ListTile - 列表控件

    ListTile(
      title: Text('list tile'),
      subtitle: Text('子标题'),
    ),

    参数说明:

    • title:标题,String
    • subtitle:子标题
     

    SingleChildScrollView - 可滚动控件

    ClipPath - 路径裁切

    ClipPath(
      clipper: BottomClipper(), // 路径
      child: Container(
        color: Colors.deepOrangeAccent,height: 200.0
      ),
    )

    参数说明:

    • clipper:路径
    • child:其他操作
     

    贝塞尔曲线案例:

    import 'package:flutter/material.dart';
    
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: <Widget>[
              ClipPath(
                clipper: BottomClipperTest(), // 路径
                child: Container(
                  color: Colors.deepOrangeAccent,
                  height: 200.0,
                ),
              )
            ],
          ),
        );
      }
    }
    
    // CustomClipper 必须复写俩方法
    class BottomClipperTest extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
    
        path.lineTo(0, 0);
        path.lineTo(0, size.height - 40);
        var firstControlPoint = Offset(size.width / 4, size.height);
        var sirstEndPoint = Offset(size.width / 2.25, size.height - 30);
        path.quadraticBezierTo(
          firstControlPoint.dx,
          firstControlPoint.dy,
          sirstEndPoint.dx,
          sirstEndPoint.dy,
        );
        var secondControlPoint = Offset(size.width / 4 * 3, size.height - 90);
        var secondEndPoint = Offset(size.width, size.height - 40);
        path.quadraticBezierTo(
          secondControlPoint.dx,
          secondControlPoint.dy,
          secondEndPoint.dx,
          secondEndPoint.dy,
        );
        path.lineTo(size.width, size.height - 40);
        path.lineTo(size.width, 0);
    
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }
    部分代码

    Tooltip - 轻量级提示

    Tooltip(
      message: '不要碰我,我怕痒',
      child: Image.network('http://hbimg.b0.upaiyun.com/615efb61cbc8ec8aad8febdf5a74541fb79c54862658a-mPdqeZ_fw658'),
    ),

    参数说明:

    • message:提示信息
    • child:包裹内容,其包裹的内容中长按都会提示

    cupertino.dart 包

    通过 import 'package:flutter/cupertino.dart'; 引入
    CupertinoPageScaffold - 脚手架,相当于Scaffold
     
     
     
  • 相关阅读:
    洛谷 1012 拼数(NOIp1998提高组)
    洛谷 1540 机器翻译
    洛谷 1328 生活大爆炸版石头剪刀布(NOIp2014提高组)
    洛谷 2820 局域网
    洛谷 1359 租用游艇
    洛谷 1195 口袋的天空
    洛谷 1316 丢瓶盖
    洛谷 1258 小车问题
    洛谷 1017 进制转换 (NOIp2000提高组T1)
    GYM
  • 原文地址:https://www.cnblogs.com/cap-rq/p/12758694.html
Copyright © 2011-2022 走看看