android flutter笔记(一) Widgets界面

董吉诺answer
148 阅读4分钟

安装配置

安装配置就不说了，直接看官网就完事了。dart语法也很简单，可以去b站或者官网学习一下

安装和环境配置 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

Widgets是什么？

官网描述：Flutter 从 React 中吸取灵感，通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI 界面。 Widget 描述了在当前的配置和状态下视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

我们可以理解为widgets就是一个控件，个人理解flutter是基于嵌套的系统。纸上得来终觉浅，code码上。

创建一个center居中的text控件并，赋值和方向 `

//导包
import 'package:flutter/material.dart';

void main() {
  //执行主函数代码
  runApp(const Center(
    //child代表一个组件 创建了text，并给与了值和方向属性
    child: Text(
      'Hello world',
      textDirection: TextDirection.ltr,
    ),
  ));

`

image.png

image.png

运行后得到一个居中的text控件，方向是横向。

界面控件StatelessWidget和StatefulWidget

这两个组件代表两种属性的组件，我们flutter中基本都使用这两种属性的组件创建对象。

  1. statelesswidget代表静态的，就是内容没有变化的，就用它当父类
  2. StatefulWidge代表动态的，内容有变化的，比如textview、img啊 等等就是它的内容的值是可以变化的

我们代码中可以使用快捷键快速创建，十分方便。

StatelessWidget 或 StatefulWidget

image.png

首先看看我们要构建的界面。

image.png 看下我们的代码。 说下我么你的思路，首先在main函数中我们创建一个materialapp的控件，material属性，学过android的就不多说了。可以理解为官方的属性的东西。

  1. main() 创建了material页面 title是我的app，home就是主内容，创建名为Myscaffold的静态控件
  2. Myscaffold继承statelesswidget静态控件，build中创建了两个孩子，自定义的appbar和文本控件
  3. Myappbar中我们通过设置两个iconbutton和一个title

就完成了界面看代码很多，实际写起来很简单

void main() {
  runApp(
    const MaterialApp(
      title: '我的app',
      home: SafeArea(
          child: MyScaffold()),
    )
  );
}

class MyScaffold extends StatelessWidget {
  const MyScaffold({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              '示例文本控件',
              style: Theme.of(
                context
              ).primaryTextTheme.titleLarge,
            ),

          ),
          const Expanded(child:
          Center(
            child: Text("您好，欢迎来到flutter"),
          )
          )
        ],
      ),
    );
  }
}


class MyAppBar extends StatelessWidget {

  const MyAppBar({required this.title, super.key});

  //创建一个title控件
  final Widget title ;

  //生命周期稍后介绍，build中就是构建界面
  @override
  Widget build(BuildContext context) {
    // Container widget 可以用来创建一个可见的矩形元素。
    // Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。
    // Container 还可以设置外边距、内边距和尺寸的约束条件等。
    // 另外，Container可以使用矩阵在三维空间进行转换。

    //这里就是我们要展示的东西
    //flutter通过代码创建布局
    return Container(
      height: 56.0,
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      //创建子布局
      child: Row(
        //代表有多个子布局
        children: [
          //创建icon按钮
           IconButton(
               onPressed: () {
            if (kDebugMode) {
              print("Navigation button被点击了");
            }
          }, tooltip: 'Navigation menu',icon: const Icon(Icons.menu))
          ,
          Expanded(child: title)
          ,
           //创建icon按钮
           IconButton(onPressed: (){
             if (kDebugMode) {
               print("Search button被点击了");
             }
          }, tooltip: 'Search',icon: const Icon(Icons.search)),
        ],
      ),
    );
  }
}

2.使用官方的appbar创建界面

image.png

void main() {
  runApp(
    const MaterialApp(
      title: 'flutter Tutorial',
      home: TutorialHome(),
    )
  );
}

class TutorialHome extends StatelessWidget {

  const TutorialHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'navigation menu',
          onPressed: null,
        ),
        title: const Text('示例标题'),
        actions: const [
          IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
            tooltip: 'Search',)
        ],
      ),
      body: const Center(
        child: Text('您好，世界')
      ),
      floatingActionButton: const FloatingActionButton(onPressed: null,
      tooltip: 'Add',
      child: Icon(Icons.add),),
    );
  }
}

手势的处理

image.png

代码很简单，main中创建了布局，自定义的mybutton，创建了gesturedetector对象，中创建布局圆角、边距等属性

void main() {

  runApp(
    const MaterialApp(
      home: Scaffold(
        body:
        Center(
          child: MyButton(),
        ),
      ),
    )
  );

}

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('我的按钮被敲击了');
      },
      child: Container(
        height: 50.0,
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0)
              ,
          color: Colors.lightGreen[500]
        ),
        child: const Center(
          child: Text("适应"),
        ),
      ),
    );
  }

简单的布局就到这里。要学flutter还是要多练习，熟悉他的语法，控件，实际上写起来还是很快上手的。

avatar
文章
阅读
粉丝