移动互联实训-4-FlutterUI

官方中文文档 / API文档

实用教程 - Flutter 中文文档 - Flutter 中文资源

Flutter - Dart API docs (flutter-io.cn)

目录

一、文本组件

关于text的设置

二、按钮组件

1.三种常用按钮组件

 2.ButtonBar

 三、图片组件

1.本地图片

 2.网络图片

四、表单组件

1.输入框 TextField

2.布局

3.控制器

4.添加图标


一、文本组件

import 'package:flutter/material.dart';
///导入flutter的依赖包

void main() => runApp(Myapp());

///Myapp继承组件Widget :
///有状态 Stateful  : 用户可交互、可修改
///无状态 Stateless : 不可修改
class Myapp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    ///返回MaterialApp
    return MaterialApp(
      ///分为title(应用标题,在Android中不显示,Web端有区别)和home(应用主体)
      title: 'This is yw\'s APP',
      ///home以Scaffold脚手架为开始
      home: Scaffold(
        ///home下有 appBar,body ...
        appBar: AppBar(
          title: Text('尤雯的学习笔记'),    ///标题栏
        ),
        body: Center(                   ///内容,使用居中格式
          child: Text('不想学习!!' * 100),
        ),
      ),
    );
  }
}

关于text的设置

查看方法:ctrl + 鼠标点击

 下面是一些常用方法:

child: Text(
              '不想学习!!' * 10,
              textAlign: TextAlign.end,   ///文本的对齐格式
              maxLines: 2,            ///最大的行数
              overflow: TextOverflow.ellipsis,  ///文本溢出处理:溢出部分化为省略号
              style: TextStyle(
                color: Colors.teal,   ///文字颜色
                backgroundColor: Colors.white,  ///背景颜色
                fontSize: 25,   ///文字大小
                fontWeight: FontWeight.bold,    ///文字加粗
                decoration: TextDecoration.underline,   ///加下划线
                decorationStyle: TextDecorationStyle.solid,   ///下划线的style
               ),
          ),

二、按钮组件

1.三种常用按钮组件

buttonPressPrint()
{
  print("按钮被点击了!");
}
body: Cen
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值