Flutter的基础知识之Dart语法

Flutter的基础知识之Dart语法

1. 关于TextStyle的设置

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterNB!!!'),
        ),
        body: Center(
          child: Text(
              'Hello World wsj is a handsome man he has a wonderful eyes, he can do every things, he can do best in every ',
              textAlign: TextAlign.left,//设置文字对齐方式
              maxLines: 1,//设置屏幕中最多显示的文字行数
              overflow: TextOverflow.ellipsis,//字符超出一行后用省略号代替
              style:TextStyle(
                  fontSize: 25,//设置字体的大小
                  color: Color.fromARGB(255, 255, 123, 124),//设置字体的颜色
                  decoration:TextDecoration.underline,//添加底部下划线
                  decorationStyle: TextDecorationStyle.dotted,//添加底部下划线的样式
              ),
          ),
        ),
      ),
    );
  }
}

2. 关于Container的设置

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
   return MaterialApp(
     title: 'Text widget',
     home: Scaffold(
       body:Center (
         child: Container(//相当于前端中的div，是一个容器
           child: new Text('Hello WSJ', style: TextStyle(fontSize: 40.0, color: Color.fromARGB(200, 212, 25, 20)),),
           alignment: Alignment.topLeft,//对齐方式
           width: 500.0,height: 400.0,
           //color: Colors.lightBlueAccent,//设置容器背景颜色
           //padding: const EdgeInsets.all(10.0),//设置内边距上下左右都设置
           padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0, 0),//可以根据需要设置上下左右的内边距
           margin: const EdgeInsets.all(10),//设置外边距，就是容器相较于外边框的距离
           decoration: new BoxDecoration(
             gradient: const LinearGradient(//设置线性渐变
               colors: [Colors.lightBlueAccent, Colors.lightGreenAccent, Colors.purple]//设置线性渐变的颜色
             ),
             border: Border.all(width: 5, color: Colors.red),//设置边框
           ),
         ),
       ),
     ),
   );
  }
}

3. 关于Image组件的使用

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    //继承于静态的组件
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Text Image',
      home: Scaffold(//脚手架结构
        appBar: new AppBar(title: new Text('Image'),),
        body: Center(//基本页面结构
          child: Container(//容器
            child: new Image.network(
              //'https://img00.zhaopin.cn/img_button/202010/09/58_195948343594.jpg',
              'https://blogimages.jspang.com/blogtouxiang1.jpg',
              //fit: BoxFit.contain,//图片不做任何处理，按原图显示
              fit: BoxFit.fill,//按容器填满
              //fit: BoxFit.fitWidth,//横向填满图片，纵向有可能被裁切
              //fit: BoxFit.cover,//图片会充满整个容器，有可能被，拉伸也有可能被裁切
              //fit:BoxFit.scaleDown,//不会改变原图片大小
              color: Colors.lightGreenAccent,
              colorBlendMode: BlendMode.lighten,//将颜色与图片混合进行叠加
              repeat: ImageRepeat.repeat,//对图片进行重复
            ),
            width: 400, height: 300,
            color: Colors.lightBlueAccent,
          ),
        ),
      ),
    );
  }  
}

4. ListView的使用ListTile

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    //静态组件
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'ListView',
      home: Scaffold(//脚手架
        appBar: new AppBar(title: new Text('Hello ListView')),
        body: new ListView(
          children: <Widget>[
            new ListTile(//ListTile 通常用于在 Flutter 中填充 ListView
              // leading: new Icon(Icons.account_balance),//添加小图标
              leading: CircleAvatar(//将图像或图表添加到列表的开头
                backgroundImage: NetworkImage('https://img95.699pic.com/photo/50137/3505.jpg_wh300.jpg'),
              ),
              title: new Text('account_balance'),
            ),
            new ListTile(//ListTile 通常用于在 Flutter 中填充 ListView
              leading: new Icon(Icons.account_balance_wallet_rounded),//添加小图标
              title: new Text('account_balance_wallet_rounded'),
            ),
            new ListTile(//ListTile 通常用于在 Flutter 中填充 ListView
              leading: new Icon(Icons.add_a_photo_outlined),//添加小图标
              title: new Text('add_a_photo_outlined'),
            ),
          ],
        ),
      ),
    );
  }
}

5. ListView横向列表的使用

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    //静态小组件
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      title: 'ListView',
      home: Scaffold(
        appBar: new AppBar(title: new Text('Hello ListView')),
        body: Center(
          child: Container(
            height: 200,
            child: MyList(

            ),
          ),
        ),
      ),
    );
  }
}
class MyList extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal,//横向列表
      children: <Widget>[
        new Container(
          width: 180,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180,
          color: Colors.yellow,
        ),
        new Container(
          width: 180,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180,
          color: Colors.purple,
        ),
      ],
    );
  }
}

6. ListView动态列表的使用

import 'package:flutter/material.dart';
void main() => runApp(MyApp(
  item:new List<String>.generate(1000, (i) => 'Item $i'),//i相当于数组下标，$i说明i是传递过去的
));
class MyApp extends StatelessWidget {
    
  final List<String> item;//接收参数
  MyApp({
    Key key, @required this.item}):super(key:key);//接收参数
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      //title: '动态列表',
      home: Scaffold(
        appBar: new AppBar(title: new Text('动态列表'),),
        body: new ListView.builder(
          itemCount: item.length,//得到传递过来的数组长度
          itemBuilder: (context, index){
    
            return new ListTile(
              title: new Text('${item[index]}'),
            );
          },
        ),
      ),
    );
  }
}

7. 网格列表

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      title: '网格列表',
      home: Scaffold(
        appBar: new AppBar(title: new Text('网格列表'),),
        // body: GridView.count(
        // padding: const EdgeInsets.all(20),
        // crossAxisSpacing: 10,//网格之间的边距
        // crossAxisCount: 3,//每行显示的列数
        // children: <Widget>[
        // const Text('I am wsj'),
        // const Text('I am zll'),
        // const Text('I am book'),
        // const Text('I am writting'),
        // const Text('I am cccc'),
        // const Text('I am zzzz'),
        // ],
        // ),
        body: GridView(
          gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2,//行间距
            crossAxisSpacing: 2,//列间距
            childAspectRatio: 0.7//横宽比
          ),
          children: [
            new Image.network('http://img5.mtime.cn/mg/2021/01/15/093740.12876174.jpg', fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2020/11/20/143205.34931246_1280X720X2.jpg', fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2020/08/25/091724.62083337_1280X720X2.jpg', fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2020/10/22/100702.49207766_1280X720X2.jpg', fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2021/01/12/180520.10988653_1280X720X2.jpg', fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2020/12/08/165505.14870477_1280X720X2.jpg', fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}

8. RowWidget布局详解之水平布局

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      title: 'RowWidget布局详解',
      home: Scaffold(
        appBar: new AppBar(title: new Text('水平布局'),),
        body: new Row(
          children: [
            new RaisedButton(//不灵活的点击事件，根据子元素的大小来分配空间
              onPressed: (){
    },//点击事件
              color: Colors.red,
              child: new Text('红色按钮'),
            ),
            new RaisedButton(
              onPressed: (){
    },//点击事件
              color: Colors.orange,
              child: new Text('橙色按钮'),
            ),
            Expanded(child:new RaisedButton(//灵活的水平布局，会平均分配空间
              onPressed: (){
    },//点击事件
              color: Colors.blue,
              child: new Text('蓝色按钮'),
            )),
             new RaisedButton(
              onPressed: (){
    },//点击事件
              color: Colors.green,
              child: new Text('绿色按钮'),
            ),
            new RaisedButton(//灵活的水平布局
              onPressed: (){
    },//点击事件
              color: Colors.purple,
              child: new Text('紫色按钮'),
            )
          ],
        ),
      ),
    );
  }
}

9. RowWidget布局之垂直布局

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return MaterialApp(
      title: 'RowWidget布局之垂直布局',
      home: Scaffold(
        appBar: new AppBar(title: Text('RowWidget布局之垂直布局')),
        body: Center(child:Column(
          crossAxisAlignment: CrossAxisAlignment.center,//副轴对其方式，因为布局方式是垂直布局，所以副轴就是水平的
          mainAxisAlignment: MainAxisAlignment.center,//主轴对齐方式
          children: [
            Text('I am wsj'),
            Expanded(child: Text('I am a handsome boy in the world')),
            Text('I love coding'),
          ],
        ),
        ),
      ),
    );
  }
}

10. 层叠布局

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage('https://profile.csdnimg.cn/3/D/5/0_weixin_44290628'),
          radius: 100,
        ),
        new Positioned(//相当于绝对布局
          top: 10,
          left: 40,
          child: new Text('wsj is handsome'),
        ),
        new Positioned(
            child: Text('羽化登仙'),
            top: 150,
            left: 68,
        ),
        // new Container(
        // decoration: BoxDecoration(
        // color: Colors.white70,
        // borderRadius: BorderRadius.circular(10),
        // ),
        // padding: EdgeInsets.all(10),
        // child: Text('羽化登仙'),
        // ),
      ],
    );
    return MaterialApp(
      title: '层叠布局',
      home: Scaffold(
        appBar: AppBar(title: Text('层叠布局')),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

11.导航的的参数传递和接收01

import 'package:flutter/material.dart';
void main(){
    
  runApp(MaterialApp(
    title: '导航栏演示01',
    home: new FirstScreen(
    ),
  ));
}
class FirstScreen extends StatelessWidget
{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('导航页面')),
      body: Center(
        child: RaisedButton(//凸起按钮
          child: Text('查看商品详情页'),
          onPressed: (){
    //按钮按下时会产生什么样的操作，也就是按下动作的响应事件
            Navigator.push(context, MaterialPageRoute(//相当于页面的跳转
                builder: (context) => new SecondScreen()
            ));
          },
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget
{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('wsj最帅！！！')),
      body: Center(
        child: RaisedButton(
          child: Text('返回'),
          onPressed: (){
    
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

12. 导航的参数传递和接受02

import 'package:flutter/material.dart';
class Product{
    
  final String title;//商品标题
  final String decription;//商品描述
  Product(this.title, this.decription);
}
void main(){
    
  runApp(MaterialApp(
    title: '导航的数据和接收',
    home: ProductList(
      products:List.generate(20, (index) => Product('王少杰的商品 $index', '这是一个商品详情，编号为 $index'))
    ),
  ));
}
class ProductList extends StatelessWidget {
    
  final List<Product> products;
  ProductList({
    Key key, @required this.products}):super(key: key);//构造函数
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: Text('商品列表')),
      body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index){
    
            return ListTile(
              title: Text(products[index].title),
              onTap: (){
    //点击之后会有一个响应事件
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) => ProductDetail(product:products[index]),
                ));
              },
            );
          },
      ),
    );
  }
}
class ProductDetail extends StatelessWidget {
    
  final Product product;
  ProductDetail({
    Key key, @required this.product}):super(key: key);
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}')),
      body: Center(
        child: Text('${product.decription}'),
      ),
    );
  }
}

13. 页面跳转并返回数据

import 'package:flutter/material.dart';
void main(){
    
  runApp(MaterialApp(
    title: '页面跳转返回数据',
    home: FirstPage(),
  ));
}
class FirstPage extends StatelessWidget{
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('要电话')),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}
class RouteButton extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return RaisedButton(
      onPressed: (){
    _navigatetophone(context);},
      child: Text('去要电话'),
    );
  }
  _navigatetophone(BuildContext context) async{
    //异步方法
    final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context)=>Phone())
    );
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
  }
}
class Phone extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: Text('我是电话')),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('长途电话'),
              onPressed: (){
    Navigator.pop(context, '长途电话：17666378389');}
            ),
            RaisedButton(
                child: Text('国内电话'),
                onPressed: (){
    Navigator.pop(context, '国内电话：186555378389');}
            ),
          ],
        ),
      ),
    );
  }
}