网站首页 » flutter,前端 » 在组件中使用某个组件,怎么知道值是怎么写

在组件中使用某个组件,怎么知道值是怎么写

August 10, 2021 flutter,前端

看下述代码

import 'package:flutter/material.dart';

// 简写:当一个函数中只有一行代码时,可以使用以下方法进行简写
void main() => runApp(MyApp());

// new 可以去掉,所以有上述的简写方法
// void main() {
//   runApp(new MyApp());
// }

// 怎么看是使用colors 还是 color, 要看类中参数修饰是什么

// MyApp 是自定义组件,组件都是类
class MyApp extends StatelessWidget {
  @override

  // widget(组件)都要实现build方法
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch:
            Colors.blue, // 主题的颜色,也可以通过RGBO设置颜色 Color.fromRGBO(r, g, b, o)
        primaryColor: Color.fromRGBO(224, 224, 224, 0.4),
      ),
      home: MyHomePage(title: '这是标题'), // 页面的标题
    );
  }
}

// 定义了一个有状态的类MyHomePage
class MyHomePage extends StatefulWidget {
  //命名构造函数,当类实例化的时候会执行
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// 前面有 _ 的类或方法为私有方法,不能在外部调用
class _MyHomePageState extends State<MyHomePage> {
  // 定义数组方法一,定义一个列表,列表中的值是字符串
  //List<String> todos = ['早起', '中午', '晚上'];
  // 定义数组方法二:定义一个数组,将待办事项保存到数组中
  var todos = ['早起', '中午', '晚上'];

  // 添加待办事项的函数 void 表示该方法没有返回
  void addTodo(String todo) {
    // setState 方法通知flutter改变状态
    setState(() {
      // 向列表中添加一个输入框中输入的内容
      // todos = todos..add(todo);
      todos.add(todo);
    });
  }

  @override
  //
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        //是一个嵌套的关系
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                onSubmitted: addTodo, //onSubmitted 时执行一个函数
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: todos
                  .map((todo) => Text(todo))
                  .toList(), // todos 通过map函数将todos中所有的值使用了Text()类,返回的是(val1, val2, val3, ...) 这种类型,要转成list, 所以使用toList()函数。
              /*
              上述箭头函数与下面函数是一样的。
               todos.map((todo){
                return Text(todo)
               })
              * */
            ),
          ],
        ),
      ),
    );
  }
}

在看到颜色定义时,有的时候用 colors.blue , 有的时候用 color.xxx 这要怎么区分用什么呢, 要点到primaryColor 的定义处, 修饰是用的 color 所以要用color.xxx

2021-08-10T00:04:27.png

如果看到有用 xxxGeometry 修饰的,例如 margin 使用 EdgeInsetsGeometry 修饰, 则使用 EdgeInserts.xxx

添加新评论