Flutter 核心小部件二（widget）

Alice◆Deng

已于 2024-06-06 12:58:42 修改

阅读量238

点赞数 1

分类专栏： Flutter 文章标签： flutter

于 2024-06-06 12:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_65391267/article/details/139494761

版权

Flutter 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Text

extends StatelessWidget

RichText

TextSpan

extends InlineSpan...DiagnosticableTree

Container

extends StatelessWidget

Row

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

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

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:剩余的空间平均分布在小部件之间
spaceAround:剩余的空间平均分布在小部件周围
spaceEvenly:剩余的空间和小部件一起平均分

代码块一

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,)),
        ],
      ),*/
    );
  }
}