9flutter案例

1.dshedline

效果

目的：实现效果的同时，提供定制，并且可以实现水平和垂直两种虚线效果：

• axis：确定虚线的方向；

• dashedWidth：根据虚线的方向确定自己虚线的宽度；

• dashedHeight：根据虚线的方向确定自己虚线的高度；

• count：内部会根据设置的个数和宽高确定密度（虚线的空白间隔）；

• color：虚线的颜色，不多做解释；

思路

虚线到底是设置多宽或者多高

• 我这里是根据方向获取父Widget的宽度和高度来决定的；

• 通过LayoutBuilder可以获取到父Widget的宽度和高度；

代码

class HYDashedLine extends StatelessWidget {
  final Axis axis;
  finaldouble dashedWidth;
  finaldouble dashedHeight;
  finalint count;
  final Color color;

  HYDashedLine({
    @requiredthis.axis,
    this.dashedWidth = 1,
    this.dashedHeight = 1,
    this.count,
    this.color = const Color(0xffff0000)
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // 根据宽度计算个数
        return Flex(
          direction: this.axis,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(this.count, (int index) {
            return SizedBox(
              width: dashedWidth,
              height: dashedHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
        );
      },
    );
  }
}

2.底部tabar

bottomNavigationBar对应的类型是BottomNavigationBar，我们来看一下它有什么属性：

• 属性非常多，但是都是设置底部TabBar相关的，我们介绍几个：

• currentIndex：当前选中哪一个item；

• selectedFontSize：选中时的文本大小；

• unselectedFontSize：未选中时的文本大小；

• type：当item的数量超过2个时，需要设置为fixed；

• items：放入多个BottomNavigationBarItem类型；

• onTap：监听哪一个item被选中；

  class BottomNavigationBar extends StatefulWidget {
    BottomNavigationBar({
      Key key,
      @requiredthis.items,
      this.onTap,
      this.currentIndex = 0,
      this.elevation = 8.0,
      BottomNavigationBarType type,
      Color fixedColor,
      this.backgroundColor,
      this.iconSize = 24.0,
      Color selectedItemColor,
      this.unselectedItemColor,
      this.selectedIconTheme = const IconThemeData(),
      this.unselectedIconTheme = const IconThemeData(),
      this.selectedFontSize = 14.0,
      this.unselectedFontSize = 12.0,
      this.selectedLabelStyle,
      this.unselectedLabelStyle,
      this.showSelectedLabels = true,
      bool showUnselectedLabels,
    })
  }

  当实现了底部TabBar展示后，我们需要监听它的点击来切换显示不同的页面，这个时候我们可以使用IndexedStack来管理多个页面的切换：

  body: IndexedStack(
    index: _currentIndex,
    children: <Widget>[
      Home(),
      Subject(),
      Group(),
      Mall(),
      Profile()
    ],

  实现

• import'package:flutter/material.dart';
  import'views/home/home.dart';
  import'views/subject/subject.dart';
  import'views/group/group.dart';
  import'views/mall/mall.dart';
  import'views/profile/profile.dart';
  
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "豆瓣",
        theme: ThemeData(
          primaryColor: Colors.green,
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent
        ),
        home: MyStackPage(),
      );
    }
  }
  
  class MyStackPage extends StatefulWidget {
    @override
    _MyStackPageState createState() => _MyStackPageState();
  }
  
  class _MyStackPageState extends State<MyStackPage> {
  
    var _currentIndex = 0;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          selectedFontSize: 14,
          unselectedFontSize: 14,
          type: BottomNavigationBarType.fixed,
          items: [
            createItem("home", "首页"),
            createItem("subject", "书影音"),
            createItem("group", "小组"),
            createItem("mall", "市集"),
            createItem("profile", "我的"),
          ],
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
        body: IndexedStack(
          index: _currentIndex,
          children: <Widget>[
            Home(),
            Subject(),
            Group(),
            Mall(),
            Profile()
          ],
        ),
      );
    }
  }
  
  BottomNavigationBarItem createItem(String iconName, String title) {
    return BottomNavigationBarItem(
        icon: Image.asset("assets/images/tabbar/$iconName.png", width: 30,),
        activeIcon: Image.asset("assets/images/tabbar/${iconName}_active.png", width: 30,),
        title: Text(title)
    );
  }

  3.数据请求和转化

封装

配置文件存放：http_config.dart

const baseURL = "http://123.207.32.32:8000";
const timeout = 5000;

网络请求工具文件：http_request.dart

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

class HttpRequest {
  // 1.创建实例对象
  static BaseOptions baseOptions = BaseOptions(connectTimeout: timeout);
  static Dio dio = Dio(baseOptions);

  static Future<T> request<T>(String url, {String method = "get",Map<String, dynamic> params}) async {
    // 1.单独相关的设置
    Options options = Options();
    options.method = method;

    // 2.发送网络请求
    try {
      Response response = await dio.request<T>(url, queryParameters: params, options: options);
      return response.data;
    } on DioError catch (e) {
      throw e;
    }
  }
}