Flutter(Widget)基本组件

Center Text MaterialApp组件 scaffold组件 Container组件 Image组件

截屏2022-07-05 22.19.44.png

1.Center 水平垂直居中

截屏2022-07-04 21.51.43.png

class CenterTextWidget extends StatefulWidget {
  @override
  _CenterTextWidgetState createState() => _CenterTextWidgetState();
}

class _CenterTextWidgetState extends State<CenterTextWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center( //上下垂直居中
        child: Text('测试文字'),
      ),
    );
  }
}

2.AppBar 

截屏2022-07-05 22.30.12.png

import 'dart:ui';
import 'package:flutter/material.dart';

class AppBarWidget extends StatefulWidget {
  @override
  _AppBarWidgetState createState() => _AppBarWidgetState();
}

class _AppBarWidgetState extends State<AppBarWidget> {
  @override
  Widget build(BuildContext context) {
//    return Scaffold(
//      appBar: AppBar(
//        title: Text('标题'),
//      ),
//      body: Container(
//      ),
//    );
    return bgAppBar();
  }

  bgAppBar() {
   String appbarBgAssetsPath = 'assets/images/appbar_normal_bg.png';
   String backAssetsPath = 'assets/images/arrow_left.png';

   double statusHeight = MediaQueryData.fromWindow(window).padding.top;
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQueryData.fromWindow(window).padding.top +48,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  image: DecorationImage(fit: BoxFit.cover, image: AssetImage(appbarBgAssetsPath))),
              child: AppBar(
                elevation: 0,
                toolbarOpacity: 0.0,
                leading: InkWell(
                    child: Container(
                      child:Image.asset(
                          backAssetsPath,
                        width: 20,
                        height: 20,
                      ),
                      width: 40,
                      alignment: Alignment.center,
                    ),
                    onTap: () {

                    }),
                backgroundColor: Colors.transparent,
                title: Text(
                  '导航条',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3.Container 容器 Text Widget

截屏2022-07-05 13.09.31.png

class ZFLContainerWidget extends StatefulWidget {
  @override
  _ZFLContainerWidgetState createState() => _ZFLContainerWidgetState();
}

class _ZFLContainerWidgetState extends State<ZFLContainerWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(10),
        ),
        alignment: Alignment.center,
        child: Text(
          'ahkfhkhfkdshfh',
          style: TextStyle(
              fontSize: 16.0,
              color: Colors.green,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.dashed,
              letterSpacing: 5.0),
        ),
      ),
    );
  }
}

4.图片widget

截屏2022-07-05 13.15.07.png

class ZFLImageWidget extends StatefulWidget {
  @override
  _ZFLImageWidgetState createState() => _ZFLImageWidgetState();
}

class _ZFLImageWidgetState extends State<ZFLImageWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: 300,
            height: 200,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(10),
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image: NetworkImage(
                        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F20%2F20211120112619_16cad.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659579107&t=51e2cc7eb2ac5f851728893c95009e65"))),
            child: ClipOval(
              child: Image.asset(
                'assets/images/version_logo.png',
                width: 100,
                height: 100,
                fit: BoxFit.fill,
              ),
//            child: Image.network(
//            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F20%2F20211120112619_16cad.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659579107&t=51e2cc7eb2ac5f851728893c95009e65",
//            width: 100,
//            height: 100,
//            fit: BoxFit.fill,
//          ),
            )));
  }
}