Flutter之Text img button组件使用（六）

flutter 架构

分为适配层用于各个平台，中间是引擎层做一些渲染和通道，最上方是ui层

ui层又分为，下基础层 动画绘图 渲染 ui 安卓和苹果

概念：一切组件，无状态的组件（不会随用户的行为改变），有状态的组件（根据用户的行为）

安装flutter及环境配置

        flutter安装教程 - 简书

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 无状态组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 内置组件 我们需要这样写
      title: 'Material App',
      home: Scaffold(
        //home 组件
        appBar: AppBar(
          // 导航条
          title: Text('首页'),
        ),
        body: MyImage(), // 挂载组件
      ),
    );
  }
}

// MyImage
class MyImage extends StatefulWidget {
  MyImage({Key? key}) : super(key: key);

  @override
  State<MyImage> createState() => _MyImageState();
}

class _MyImageState extends State<MyImage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      // 队列
      children: [
         Image.network(
          'https://t11.baidu.com/it/u=3293671087,223279754&fm=58',
          height: 140.0,
          fit: BoxFit.cover,
        ),
        Image.network(
          'https://t10.baidu.com/it/u=1643070093,2363348149&fm=58',
          height: 140.0,
          fit: BoxFit.cover,
        ),
        // Image.asset('images/logo.png') 
      ],
    );
  }
}

// button
class MyButton extends StatefulWidget {
  MyButton({Key? key}) : super(key: key);

  @override
  State<MyButton> createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.red,
      child: TextButton(
        child: Text('Click'),
        onPressed: () => {print('click me')},
      ),
    );
  }
}

// text
class MyHome extends StatefulWidget {
  // 创建了一个有状态的组件
  MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.red,
      child: Text(
        'cookie66666666',
        style: TextStyle(
          fontSize: 30,
          fontStyle: FontStyle.italic, // 斜体
          backgroundColor: Colors.blue,
          decoration: TextDecoration.underline, //装饰线
        ),
        textAlign: TextAlign.right,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ), // 挂载一个child
    );
  }
}