第九十八期：Flutter学习（一）

terrence386

发布于 2022-07-15 11:29:52

5020

发布于 2022-07-15 11:29:52

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

昨天和今天除了写一些小程序的代码之外，都在学习flutter相关的内容。感觉flutter的学习成本之所以高，很大的原因其实是因为它的学习资料真正能学到东西的，其实还是它的官网，但是官网又是英文版的，读起来就比较费劲。

再一个是因为flutter的生态其实也是比较庞大的。除了基础的widget组件，还有两种不同风格的组件形式material和cupertino。除此之外，还有其他各种库，比如请求库，dio以及各种插件。

https://api.flutter.dev/flutter/material/material-library.html

官网的这个界面里枚举了flutter用到的库：

组件库
核心库 core
web端的库
跨平台的继承库
加密
文件操作
...等等

组件其实还好，因为前端的组件这个概念其实都是通用的。基于原生的最基本的标签组件，我们进行组合来实现我们的业务组件。但是和web端不同的是，flutter的组件都是对象。它的属性方法和web比起来差异很大，对于新手来说不容易记的清楚。

还有一个原因是flutter采用的Dart语言。一种类似ts但是有不同于ts的语言，这可能也是flutter学习成本相对来说比较高的一个原因吧。

今天主要熟悉了material库中常用的组件。用easymock和dio库写了个简单的get请求的示例。

把常用组件的概念以及示例代码做了一个总结，其他的也没什么东西。

material.dart 常用组件

这部分内容比较枯燥，可以简单了解一下。

基础组件

AppBar
Column
Container
ElevatedButton
Image
Placeholder
Row
Scaffold
Text

AppBar

属性	含义	示例
actions
title	标题
color	颜色	Colors.amber[600]
bottom
bottomOpacity
foregroundDecoration
centerTitle
elevation
flexibleSpace

示例：

Scaffold(
  body: CustomScrollView(
    primary: true,
    slivers: <Widget>[
      SliverAppBar(
        title: const Text('Hello World'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // handle the press
            },
          ),
        ],
      ),
      // ...rest of body...
    ],
  ),
)

Column

Column 用来在垂直方向进行布局。

想要子组件自动填充垂直方向的空间，可以用Expanded组件进行包裹。

Column组件不支持滚动，如果我们需要支持滚动，则可以考虑ListView组件。

属性

属性	含义	示例
children
crossAxisAlignment	横轴对齐
direction	用作主轴的方向
textDirection
textBaseline
verticalDirection

示例：

Column(
  children: const <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: FlutterLogo(),
      ),
    ),
  ],
)

Contanier 组件

属性

属性	含义	示例
alignment	对齐方式
child	子组件
color	颜色	Colors.amber[600]
constraints	应用于子级的其他约束
decoration	应用于子组件背后
foregroundDecoration	应用于子组件前
margin		const EdgeInsets.all(10.0),
padding
transform
transformAligment
width		50
height		50

方法

方法
build

示例-simple：

Center(
  child: Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.amber[600],
    width: 48.0,
    height: 48.0,
  ),
)

示例-complex:

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  transform: Matrix4.rotationZ(0.1),
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .headline4!
        .copyWith(color: Colors.white)),
)

ElevatedButton 组件

属性

属性	含义	示例
autofocus
child	子组件
color	颜色	Colors.amber[600]
style
onPressed
onLongPress
onHover
onFocusChange
enabled

示例：

 final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
        ElevatedButton(
            style: style,
            onPressed: null,
            child: const Text('Disabled'),
        ),
        const SizedBox(height: 30),
        ElevatedButton(
            style: style,
            onPressed: () {},
            child: const Text('Enabled'),
        ),
    ],
    ),
);

Text 组件

文本小部件显示具有单一样式的文本字符串。根据布局约束的不同，字符串可能会跨多行中断，也可能全部显示在同一行上。

style参数是可选的。省略时，文本将使用最接近的封闭式DefaultTextStyle中的样式。如果给定样式为TextStyle。inherit属性为true（默认值），给定样式将与最近的封闭DefaultTextStyle合并。这种合并行为非常有用，例如，在使用默认字体系列和大小时，可以将文本加粗。

属性

属性	含义	示例
maxLines
overflow	子组件
color	颜色	Colors.amber[600]
style
textAlign
textDirection
textHeightBehavior
textScaleFactor
textWidthBasis

布局组件

Align

子组件在父组件中进行定位。

属性

属性	含义	示例
alignment
heightFactor
widthFactor

示例：

Center(
  child: Container(
    height: 120.0,
    width: 120.0,
    color: Colors.blue[50],
    child: const Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
    ),
  ),
)

AspectRatio

将子对象的大小调整为特定的纵横比/宽高比。

属性

属性	含义	示例
aspectRatio
child

示例：

Container(
      color: Colors.blue,
      alignment: Alignment.center,
      width: double.infinity,
      height: 100.0,
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          color: Colors.green,
        ),
      ),
    );

Baseline

根据子组件的基线定位子组件位置。

属性

属性	含义	示例
baseline
baselineType
child

示例：

BaseLine(
    baseline:100,
    baselineType:TextBaselIST.alphabetic,
    child:MyText()
)

ConstrainedBox 组件

对其子级施加附加约束的小部件。

例如，如果希望子对象的最小高度为50.0个逻辑像素，可以使用const-BoxConstraints（minHeight:50.0）作为约束。

属性

属性	含义	示例
constraints
child

示例：

ConstrainedBox(
  constraints: const BoxConstraints.expand(),
  child: const Card(child: Text('Hello World!')),
)

Padding 组件

属性

属性	含义	示例
padding
child

示例：

const Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello World!'),
  ),
)

SizedBox 组件

指定大小的盒子。

属性

属性	含义	示例
height
width

示例：

const SizedBox(
  width: 200.0,
  height: 300.0,
  child: Card(child: Text('Hello World!')),
)

Transform 组件

在绘制其子级之前应用转换的小部件。

属性

属性	含义	示例
alignment
filterQuality
origin
transform
transformHitTests

示例：

Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Apartment for rent!'),
    ),
  ),
)

dio get请求的简单示例代码

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    getHttp();
    return Scaffold(
      body: Center(
        child: Text('terrence home page')),
    );
  }

  // request
  void getHttp() async {
    try{
      Response response;
      response = await Dio().get('https://mock.mengxuegu.com/mock/629782a36163854a32e82a09/shop/homepage');
      return print(response);
    }catch(e){
      return print(e);
    }
  }
}