组件用法大全
英文的。所有组件都在这里。
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。