Flutter入门篇——基本组件

组件用法大全

英文的。所有组件都在这里。
https://api.flutter-io.cn/flutter/widgets/widgets-library.html

Center，Text

入门案例中提到的两个组件：
Center：居中布局。
Text：显示一段文字。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(Center(
    child: Text(
      '你好，世界！',
      textDirection: TextDirection.ltr,
      textScaleFactor: 4,
    ),
  ));
}

效果：

StatelessWidget

顾名思义，没有状态的组件，用于实现自定义的Widget。

定义一个类，继承它，就是一个无状态的组件。
抽象方法：返回子组件。

//定义组件
class HelloWorld extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Center(
      child: Text(
        '你好，世界！',
        textDirection: TextDirection.ltr,
        textScaleFactor: 4,
      ),
    );
  }
}

使用这个组件：

runApp(HelloWorld());

效果：入门案例。

MaterialApp

Material是一种界面风格。

MaterialApp是该风格的根组件。
Scaffold是它的布局方式。

用Material套入门案例：

class HelloWorld2 extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
    	//首页路由
        home: Scaffold(
        	//顶部导航区
            appBar: AppBar(
              title: Text('入门案例'),
            ),
            //主要内容区
            body: HelloWorld()
        )
    );
  }
}

效果：

Container

Container是一种布局组件。有margin，padding，border。

简单使用：

class HelloWorld extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      child: Text(
        '你好，世界！',
        textDirection: TextDirection.ltr,
        textScaleFactor: 4,
      ),
      //一些样式
      decoration: BoxDecoration(
        color: Colors.lightGreen,
        border: Border.all(color: Colors.black, width: 10.0),
      ),
      //设置空白
      padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
      margin: EdgeInsets.fromLTRB(20, 20, 20, 20),
    );
  }
}

效果：
margin，padding都是20。
背景色浅绿，边框黑色，宽度10。