官方Demo -基础Widget

基础Widget

一 Widget基础简介

TODO：这一part后面再细解

二 文本、字体样式

2.1 文本

常见属性：

• textAlign

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center (
            child: Text("Hello World",
              textAlign: TextAlign.center,
            ), // 下面的代码都是替换该位置
        ),
      ),
    );
  }
}

• maxLines
• overflow

Text("Hello World!!! I'm Yangchengfeng" *4,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
),

• textScaleFactor

Text("Hello World!!!",
    textScaleFactor: 2.0,
),

• TextStyle

Text("Hello World!!!",
    style: TextStyle(
      color: Colors.blue,
      fontSize: 19.0,
      height: 1.2,
      fontFamily: "Courier",
      background: new Paint()..color=Colors.yellow,
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.dashed
    ),
),

• TextSpan：表示文本的一个片段

Text.rich(TextSpan(
    children: [
       TextSpan(
         text: "link："
       ),
       TextSpan(
         text: "http://www.baidu.com",
         style: TextStyle(
           color: Colors.blue
         )
       )
   ]
))

• DefaultTextStyle

DefaultTextStyle(
    style: TextStyle(
       color:Colors.red,
       fontSize: 20.0,
     ),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
         Text("hello world"),
         Text("I am Jack"),
         Text("I am Jack",
           style: TextStyle(
               inherit: false, //2.不继承默认样式
               color: Colors.grey
           ),
         ),
       ],
     ),
 ),

2.2 文本

三 按钮

• RaisedButton：水波纹，默认带有阴影和灰色背景。按下后，阴影会变大

RaisedButton(
     child: Text("Normal"),
     onPressed: ()=>{},
)

• FlatButton：默认背景透明并不带阴影。按下后，会有背景色

FlatButton(
    child: Text("Normal"),
    onPressed: ()=>{},
)

• OutlineButton：默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)

OutlineButton(
      child: Text("Normal"),
       onPressed: ()=>{},
)

• IconButton：一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

IconButton(
    icon: Icon(Icons.thumb_up),
     onPressed: ()=>{},
)

• 自定义Btn

RaisedButton(
   color: Colors.blue,
    highlightColor: Colors.blue[700],
    colorBrightness: Brightness.dark,
    splashColor: Colors.grey,
    child: Text("Submit"),
    shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
    onPressed: () => {},
)

四 图片和Icon

图片资源可以来自：asset、文件、内存以及网络

1、asset

• 在工程根目录下创建一个images目录，并将图片拷贝到该目录
• 在pubspec.yml中的flutter部分添加如下内容

flutter:
  assets:
    - images/intro.png

• Image.asset从asset中加载、显示图片

Image.asset("images/intro.png",
   width:200
)

2、文件
3、内存
4、网络

 Image.network("http://goss4.vcg.com/creative/vcg/800/new/VCG211177466612.jpg",
     width: 300,
)

• TODO图片缓存

五 单选开关和复选框

5.1 Switch

• 只能定义宽度，高度也是固定的

5.2 Checkbox

• 大小是固定的，无法自定义

六 输入框及表单、富文本

6.1 输入框

装饰构造器：InputDecoration

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('输入框'),
        ),
        body: Column(
          children: <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                labelText: "用户名",
                hintText: "用户名或邮箱",
                prefixIcon: Icon(Icons.person)
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: "密码",
                hintText: "您的登录密码",
                prefixIcon: Icon(Icons.lock)
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2、获取输入内容(两种方法)

6.2 表单

6.3 富文本

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RichText(
          text: TextSpan(
            text: 'This is ',
            style: TextStyle(color: Colors.black, fontSize: 36.0),
            children: <TextSpan>[
              TextSpan(
                  text: 'bold ',
                  style: TextStyle(fontWeight: FontWeight.bold, )
              ),
              TextSpan(
                  text: 'text. '
              ),
              TextSpan(
                text: 'This is ',),
              TextSpan(
                  text: 'larger ',
                  style:
                  TextStyle(fontSize: 22.0)),
              TextSpan(
                text: 'font size.',),
              TextSpan(
                text: 'This is ',),
              TextSpan(
                  text: 'red ',
                  style:
                  TextStyle(color: Colors.red)),
              TextSpan(
                text: 'color.',),
            ],
          ),
        ),
      ),
    );
  }
}

• 字节跳动开源的 Flutter 富文本展示效果

【More】

• 基于TextField实现顶部searchBar

想了解更多属性，点击官网章节传送门