csdn博客文章NO.8

---

前言

            昨天没有来得及写，主要是因为公司里面又新的业务来了（其实是我同事催我回去），今天公司里面有个业务，是关于字符选择的，有点类似与时间选择器。我在网上找了很多的资料，结果都达不到我想要的效果，话不多说，看图

---

提示：以下是本篇文章正文内容，下面案例可供手敲

效果图（手机截屏下来的有点大）：

源代码：

导入jar包：

dh_picker: ^0.0.4

import 'package:dh_picker/dh_picker.dart';
import 'package:flutter/material.dart';

class ScrollableSelected extends StatefulWidget {
  @override
  _ScrollableSelectedState createState() => _ScrollableSelectedState();
}

class _ScrollableSelectedState extends State<ScrollableSelected> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: RaisedButton(
            child: Text("弹出"),
            onPressed: (){
             _showModalBottomSheet(context,['母婴', '保洁', '家政','保健','开锁','疏通','清洗','维修','收纳','推拿','催乳','育婴']).then((value){
               print(value);
             });
            },
          ),
        ),
      ),
    );
  }
}
Future<String> _showModalBottomSheet(context,list) async {
  String value;
  var result = await showModalBottomSheet(
      context: context,
      builder: (context) {
        return
          Container(
            height: 340,
            child: Column(
              children: [
                Container(
                  height: 70,
                  color: Color(0xffF7F8FA),
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  child:Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      InkWell(
                        child: Text("取消",style: TextStyle(fontSize: 18,color: Color(0xff2DDD99))),
                        onTap: (){
                           Navigator.pop(context);
                        },
                      ),
                      Text("请选择",style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500),),
                      InkWell(
                        child: Text("确定",style:  TextStyle(fontSize: 18,color: Color(0xff2DDD99))),
                      onTap: (){
                        Navigator.pop(context,value);
                      },
                      ),
                    ],
                  ),
                ),
                  Container(
                  height: 250,
                  child: StringPicker(
                    itemExtent: 40,
                    data: list,
                    itemStyle: TextStyle(fontSize: 18),
                    onSelectedItemChanged: (String result) {
                      value = result;
                    },
                  ),
                ),
              ],
            ),
          );
      });
  return result;
}

一.GridView

GridView是flutter的常用组件，但是我以前存粹就是为了图个方便，对一些规则的布局在一行规定个数，但是又没有想过一个场景就是，如果是不同的用户使用ipd和手机。这两个的屏幕宽度有很大的差别，使用GridView的时候，会帮我自动的放大布局，但是用户使用ipd这种大屏幕仅仅是一行想多看及个图标，文字，图片啊。今天我就认识到gridView的另外一种属性：SliverGridDelegateWithMaxCrossAxisExtent，或者直接是GridView.extent

代码如下

class GridListAdvance extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: GridView.extent(
            maxCrossAxisExtent: 100,
            childAspectRatio: 10/5,
            children: [
              Icon(Icons.event),
              Icon(Icons.list),
              Icon(Icons.work),
              Icon(Icons.list),
              Icon(Icons.work), Icon(Icons.list),
              Icon(Icons.work),
            ],
        )
      ),
    );
  }
}

二.ListWheelScrollView

这个组件可谓是非常的强大，有了这个字符选择器和时间选择器的制作那么就会非常的简单 ，不二人选就是这个组件了,如果要是一个横着的选择器就得加上RotatedBox

class ListWheelScrollDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RotatedBox(
        quarterTurns: 1,
        child: ListWheelScrollView(
          itemExtent: 50,
          //两边的透明度
          overAndUnderCenterOpacity: 0.3,
          //中间的元素放大
          magnification: 1.5,
          //这个可以吻合落点出
          physics: FixedExtentScrollPhysics(),
          //回调函数，index是下标
          onSelectedItemChanged: (index) {
            print(index);
          },
          children: List.generate(
              10,
              (index) => Container(
                    child: RotatedBox(
                        quarterTurns: 3,
                        child: Center(
                            child: Text(
                          "${index}",
                          style: TextStyle(fontSize: 40),
                        ))),
                  )),
        ),
      ),
    );
  }
}

三.PageView

这个组件可能用的不是很多，但是他的使用场景，我想很多的小伙伴肯定见过。就是翻小说的滑动组件，非常的丝滑

class MyPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      scrollDirection: Axis.vertical,
      pageSnapping: true,
      onPageChanged: (index){
        print(index);
      },
      children: [
        Container(
          color: Colors.blue
        ),
        Container(
          color: Colors.red,
        ),
      ],
    );
  }
}

4.SingleChildScrollView

SingleChildScrollView与listView的区别在于，第一者使用页面如果只是超出了一点点并不会有滑动的空间，而第二者不一样 如果你想要页面不超过一屏，但是又以防万一，就可以使用第一个 如果想要页面有滑动的空间，就可以使用第二个

测试代码:

class MySingleChildScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
         SingleChildScrollView(
           child: Column(
              children: [
                FlutterLogo(size: 300),
                FlutterLogo(size: 415)
              ],
            ),
         ),
    );
  }
}

---

总结

             flutter的组件虽然非常的多，但是面对很多的场景，有更多不同的选择。不需要你全部记住，但是需要知道的是什么样的场景该使用什么