目录
extends MultiChildRenderObjectWidget...Widget
extends InlineSpan...DiagnosticableTree
Text
extends StatelessWidget
A run of text with a single style.
textAlign | |
style | |
class TextDemo extends StatelessWidget {
final TextStyle _textStyle = TextStyle(
fontSize: 16,
);
final String _author = '字节跳动技术';
final String _title = '一文秒懂Flutter跨平台演进及架构';
TextDemo({super.key});
@override
Widget build(BuildContext context) {
return Text(
'《$_title》 --$_author Flutter采用同一个Dart Framework层来统一Flutter C++引擎和Web引擎,最终可以运行在Android,iOS,Browser上,从Flutter引擎代码不难看出Flutter也是支持Fuchsia操作系统。',
textAlign: TextAlign.center,
style: _textStyle,
);
}
}
RichText
extends MultiChildRenderObjectWidget...Widget
A paragraph of rich text.
text | |
TextSpan
extends InlineSpan...DiagnosticableTree
An immutable span of text.
text | |
style | |
children | Additional spans to include as children. |
class RichTextDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return RichText(
text: const TextSpan(
text: '《Flutter跨平台演进及架构》',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
children: [
TextSpan(
text: '--',
style: TextStyle(fontSize: 16,color: Colors.brown),
),
TextSpan(
text: '字节跳动技术',
style: TextStyle(fontSize: 16,color: Colors.blue),
),
]),
);
}
}
Container
extends StatelessWidget
A convenience widget that combines common painting, positioning, and sizing widgets.
color | |
child | |
padding | |
margin | |
alignment | A point within a rectangle. `Alignment(0.0, 0.0)` represents the center of the rectangle. `Alignment(-1.0, -1.0)` represents the top left of the rectangle. `Alignment(1.0, 1.0)` represents the bottom right of the rectangle. |
class LayoutDemo extends StatelessWidget {
const LayoutDemo({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.pink[100],
alignment: Alignment(0.0,0.0),
child: Text(
'layout_demo',
)
);
}
}
Row
extends Flex ...Widget
A widget that displays its children in a horizontal array.
children | |
mainAxisAlignment | How the children should be placed along the main axis in a flex layout. spaceBetween:剩余的空间平均分布在小部件之间 |
代码块一
class TextDemo extends StatelessWidget {
final TextStyle _textStyle = TextStyle(
fontSize: 16,
);
final String _author = '字节跳动技术';
final String _title = '一文秒懂Flutter跨平台演进及架构';
TextDemo({super.key});
@override
Widget build(BuildContext context) {
/*return Text(
'《$_title》 --$_author Flutter采用同一个Dart Framework层来统一Flutter C++引擎和Web引擎,最终可以运行在Android,iOS,Browser上,从Flutter引擎代码不难看出Flutter也是支持Fuchsia操作系统。',
textAlign: TextAlign.center,
style: _textStyle,
);*/
/*return RichTextDemo();*/
return Container(
color: Colors.amber[200],
child: Row(
children: <Widget>[
Container(
color: Colors.grey,
child: Icon(
Icons.add,
size: 20,
),
padding: EdgeInsets.all(40),// 内距
margin: EdgeInsets.all(10), // 外距
),
Container(
color: Colors.grey,
child: Icon(
Icons.add,
size: 20,
),
padding: EdgeInsets.all(40),// 内距
margin: EdgeInsets.all(10), // 外距
)
],
),
);
}
}
代码块二(mainAxisAlignment)
class LayoutDemo extends StatelessWidget {
const LayoutDemo({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.pink[100],
alignment: Alignment(0.0,0.0),
/* child: Text(
'layout_demo',
),*/
// 2. 弹性盒子布局 横向Row 纵向Column 多层Stack
child: Row(
// spaceBetween:剩余的空间平均分布在小部件之间
// spaceAround:剩余的空间平均分布在小部件周围
// spaceEvenly:剩余的空间和小部件一起平均分
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(color: Colors.red,child: Icon(Icons.add,size: 60,),height: 100,),
Container(color: Colors.white,child: Icon(Icons.abc,size: 40,)),
Container(color: Colors.blue,child: Icon(Icons.ac_unit,size: 20,)),
],
),
/*child: Column(
children: [
Container(color: Colors.red,child: Icon(Icons.add,size: 40,)),
Container(color: Colors.white,child: Icon(Icons.abc,size: 40,)),
Container(color: Colors.blue,child: Icon(Icons.ac_unit,size: 40,)),
],
),*/
/*child: Stack(
children: [
Container(color: Colors.red,child: Icon(Icons.add,size: 80,)),
Container(color: Colors.white,child: Icon(Icons.abc,size: 60,)),
Container(color: Colors.blue,child: Icon(Icons.ac_unit,size: 20,)),
],
),*/
);
}
}