Flutter学习记录-关于一些常见实现

1. 底部导航栏

   return new Scaffold(
         bottomNavigationBar: BottomNavigationBar(
           items: [
             BottomNavigationBarItem(
                 icon: Icon(
                   Icons.home,
                   color: Color(0x00aaaaaaaa),
                 ),
                 title: Text(
                   "投币",
                   style: TextStyle(
                       color: Color(0x00aaaaaaaa)
                   ),
                 )
             ),
             BottomNavigationBarItem(
               icon: Icon(
                 Icons.home,
                 color: Color(0x00aaaaaaaa),
               ),
               title: Text(
                 "动态",
                 style: TextStyle(
                   color: Color(0x00aaaaaaaa)
                 ),
               )
             ),
             BottomNavigationBarItem(
                 icon: Icon(
                   Icons.home,
                   color: Color(0x00aaaaaaaa),
                 ),
                 title: Text(
                   "我的",
                   style: TextStyle(
                       color: Color(0x00aaaaaaaa)
                   ),
                 )
             )
           ],
         ),
       );

2. 网络图片

           image: DecorationImage(
             image: NetworkImage("https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg"),
             fit: BoxFit.fitWidth,
           ),

3. 圆形头像

            CircleAvatar(
              backgroundImage: NetworkImage(
                "https://wx.qlogo.cn/mmopen/vi_32/LH99GfeT31hdYG8W8c6wRialyC4nicTfssDXeqtIs4f5XogNqHhTdmVIuQDeGcgE0KRlZyzAz7JO5Nc7yesHx9Lg/132",
              ),
            ),

4.制作水平滑动的区域

//组件类
import 'package:flutter/cupertino.dart';

class ChooseListViewComponent{
  static ListView create(List<String> spanList){

    List<Widget> wl = new List<Widget>();

    for(var span in spanList){
      wl.add(Container(
        width: 80,
        child: Text(
          span,
          textAlign: TextAlign.center,
          style: TextStyle(
              color: Color(0x00cccccccc),
              fontSize: 20
          ),
        ),
      ));
    }

    ListView lv = ListView(
      scrollDirection: Axis.horizontal,
      children: wl,
    );

    return lv;
  }
}

//使用
     Container solrView = new Container(
      height: 20,
      margin: EdgeInsets.only(top: 7),
      child: ChooseListViewComponent.create(["123","321"])
    );

5.网络请求

import 'package:dio/dio.dart';
import 'dart:convert';

class HttpRequest {
  static final Dio dio = Dio();
  static final String path = "https://minapp.cstbservice.top";


  static Future<Map<String, Object>> request<T>(String url, {
    String method = "get",
    Map<String, dynamic> params
  }) async {
    // 1.创建单独配置
    final options = Options(
        method: method,
        responseType: ResponseType.plain,
    );
    url = path + url;
    // 2.发送网络请求
    try {
      Response response = await dio.request(url, queryParameters: params, options: options);
      Map<String, Object> news = jsonDecode(response.data.toString());
      return news;
    } on DioError catch(e) {
      return null;
    }
  }
}


//如何使用
void getHttp() async {
  print(await HttpRequest.request("/dynamic/getDynameicType"));
}

6.网络请求局部刷新

List<String> spanList = new List<String>(); //数据存放区
final StreamController<List<String>> spanListStreamController = StreamController<List<String>>(); //初始化

/**
 * 异步请求
 */
void getHttp() async {
  Map<String, Object> response = await HttpRequest.request("url地址");
  List<dynamic> data = response["data"];

  for(var item in data){
    spanList.add(item["name"]);
  }

  spanListStreamController.sink.add(spanList);
}

class MainPage extends StatefulWidget {
  @override
  MainPageState createState() => MainPageState();
}

class MainPageState extends State<MainPage> {

  MainPageState(){
    getHttp();
  }

  @override
  void dispose(){
    spanListStreamController.close();   //关流
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    xxx
    Container solrView = new Container(
        height: 25,
        margin: EdgeInsets.only(top: 7),
        child: StreamBuilder(
          stream: spanListStreamController.stream,
          initialData: spanList,
          builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot){
            return ChooseListViewComponent.create(snapshot.data);
          },
        )
    );
    xxx
  }

7.图片缩放

                Image.network(
                  img,
                  width: 200,
                  height: 100,
                  fit: BoxFit.fitWidth,
                ),

8.左右布局Row

            Container(
                margin: EdgeInsets.only(top: 80),
                constraints: BoxConstraints.tightFor(width: 200),
                child: Row(
                  children: <Widget>[
                    Text('点赞评论收藏', style: TextStyle(fontSize: 15)),
                    Expanded(
                      child: Text(''), // 中间用Expanded控件
                    ),
                    Text('来自微信', style: TextStyle(fontSize: 12)),
                  ],
                )
              ),

9.打包

//生成密钥
keytool -genkey -v -keystore D:/app/android/haitao_key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias keyalias

   修改文件

    signingConfigs{
        release{
            keyAlias 'keyalias'
            keyPassword '111'
            storeFile file('F:/Android/key.jks')
            storePassword '111'
        }
        debug{
            keyAlias 'keyalias'
            keyPassword '111'
            storeFile file('F:/Android/key.jks')
            storePassword '111'
        }
    }


    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.release
        }
    }

  ///打包

flutter build apk

9.真机打包成功后图片不显示

///在AndroidManifest.xml文件的manifest标签下中添加
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />