flutter 主要weight学习(materialapp scaffold container text)

flutter目录结构

其中有android和ios的建立目录,这里面可以先不关心,重要的是lib文件夹,里面有项目入口main.dart。还需要注意的是配置文件pubspec.yaml,里面的依赖项dependencies中可以写想要的依赖包,我们可以pubget来下载到本地。

接下来是写代码的事

main.dart的函数入口

import ‘package:flutter/material.dart‘;
void main() {
  runApp(Myapp());
}

Myapp()作为基weight可以build一个materialAPP

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("你好")),
          body: homeapp(),
        ),
        theme: ThemeData(
            //brightness: Brightness.dark,
            primarySwatch: Colors.yellow));
  }
}

以上两步都可以当作基础。其中要想查找每一个weight中的参数,可以用ctrl键+鼠标左击查看源码。

materialapp当作基础控键,scaffold当作标签式界面,container当作容器控键,text当作文字控键,其中都有大量的参数,可以查看源码。

import ‘package:flutter/material.dart‘;
void main() {
  runApp(Myapp());
}

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("你好")),
          body: homeapp(),
        ),
        theme: ThemeData(
            //brightness: Brightness.dark,
            primarySwatch: Colors.yellow));
  }
}

class homeapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: Text(
              "你好,Flutter1111111111",
              textAlign: TextAlign.left,
              overflow:TextOverflow.clip ,
              maxLines: 1,
              textScaleFactor: 2.0,
              textDirection: TextDirection.ltr,
              style: TextStyle(
                  fontSize: 10.0,
                  //color: Colors.yellow
                  color: Color.fromRGBO(244, 13, 23, 100),
              fontWeight: FontWeight.w300,
              fontStyle: FontStyle.italic),
            ),
            height: 300.0,
            width: 300.0,
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(
                color:Colors.yellow,
                width: 20.0
              )
            )));
  }
}

flutter 主要weight学习(materialapp scaffold container text)

上一篇:HTTP深入浅出http请求


下一篇:vue axios上传、下载 进度