Flutter之statelessWidget的基础组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. Container 的容器
  • decoration: BoxDecoration(color:_getColor()),:装饰器 设置容器背景颜色
  • alignment: Alignment.center,:居中方式
  • child: Column():子节点基本

2.全部代码:

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
class MyStatelessWidgetApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo 测试',
      theme: ThemeData(
        primarySwatch: Colors.amber,
        brightness: Brightness.light,
        primaryColorBrightness: Brightness.dark,
      ),
      home: MyWidgeTest(title: 'Fade Demo1'),
    );
  }
}

class MyWidgeTest extends StatefulWidget {
  MyWidgeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyWidgeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;
  Color color2 = ColorUtil.color('#a11F5733');
  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }
  var textStyle =TextStyle(color: Colors.pink,fontSize: 50,fontWeight: FontWeight.w400);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(color:_getColor()),
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Text("文本",style: textStyle,),
            Icon(Icons.android,color: Colors.green,size: 40,),
            CloseButton(),
            BackButton(),
            Chip(avatar:Icon(Icons.people),label: Text("这是文本"),labelStyle:textStyle),
            Divider(
              color: Colors.yellow,
              height: 16,
              indent: 20,
            ),
            Card(
                color:Colors.teal,
                elevation: 10,
                margin: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
                child: Container(
                  padding: EdgeInsets.all(1),
                  child: Text("在哪呢",style: textStyle,),
                )
            ),
            AlertDialog(
              title:Text("你好"),
              content: Text("真是的"),

            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Fade',
        child: Icon(Icons.brush),
        onPressed: () {
          _toggle();
        },
      ),
    );
  }

  bool flag=true;
  void _toggle() {
    setState(() {
      print(1111);
      flag=!flag;
    });
  }
  _getColor() {
    if(flag){
      return ColorUtil.color('#a11F5733');
    }else {
      return Colors.pink;
    }
  }

  ListData() {
    var list= <Widget>[];
    for (var i = 0; i < 100; ++i) {
      list.add( Text ("列表数据$i",style:textStyle ),);

    }
    return list;
  }
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值