flutter基础组件整合的使用自用demo

原创

已于 2022-02-16 09:40:05 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios

于 2022-02-15 16:12:07 首次发布

本文介绍了使用Flutter构建应用时的关键控件如Scaffold、AppBar、ListView、Swiper等，展示了如何实现底部导航、抽屉、滑动视图、列表项和输入框，并附带Toast提示。通过实例演示了Card、ClipRRect、AspectRatio等组件的使用。

使用的控件有:

Container,ListView,ListTile,Scaffold,Row,Column,Card,ClipRRect,Image,TextField,SizedBox,Icon,Text,Swiper,Toast

先上demo图:

左侧抽屉

右侧抽屉

使用到的依赖:

fluttertoast: ^8.0.8
flutter_swiper_null_safety: ^1.0.0

使用到的控件介绍

整体控件用的是Scaffold

appBar
显示在界面顶部的一个 AppBar

appBar: AppBar(
        title: const Text(
          "标题",
          textAlign: TextAlign.center,
        ),
        actions: const [
          Icon(
            Icons.list_rounded,
            color: Colors.orange,
          )
        ],
      ),

body
当前界面所显示的主要内容 Widget

body: GestureDetector(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            _viewpage(context),
            _listView(),
            _item(),
            _editText()
          ],
        ),
      ),

bottomNavigationBar
显示在页面底部的导航栏
当点击第2个按钮(i=1)时会弹出dialog

bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            label: "首页",
            icon: Icon(
              Icons.home,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮2",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮3",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
        ],
        currentIndex: currentIndex,
        onTap: (int i) {
   
      showDialog<Null>(
                context: context,
                builder: (BuildContext context) {
   
   
                  return SimpleDialog(
                    title: Text('选择弹窗'),
                    children: [
                      SimpleDialogOption(
                        child: Text('选项1'),
                        onPressed: () {
   
   
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项2'),
                        onPressed: () {
   
   
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项3'),
                        onPressed: () {
   
   
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                });},
      ),

抽屉布局 drawer/endDrawer

 	   drawer: Drawer(
        child: _buildLoadingView(),
      ),
      endDrawer: Drawer(
        child: _ListWheelView(),
      ),

floatingActionButton

   floatingActionButton: new FloatingActionButton(
        onPressed: () {
   
   },
        child: new Icon(Icons.add),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.blue,
      ),

lodingview

 Widget _buildLoadingView() {
   
   
    return Container(
      width: double.maxFinite,
      height: 100,
      child: const Center(
        child: SizedBox(
          height: 50.0,
          width: 50.0,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
          ),
        ),
      ),
    );
  }

ListWheelScrollView

  Widget _ListWheelView() {
   
   
    return Container(
      child: ListWheelScrollView(
        //高度
        itemExtent: 20,
        //ListWheelScrollView的渲染效果类似车轮，设置diameterRatio调整其直径属性：
        diameterRatio: 1,
        // 性表示车轮水平偏离中心的程度，用法如下
        offAxisFraction: 0,
        //通过useMagnifier和magnification属性实现放大镜效果，useMagnifier是否启用放大镜，magnification属性是放大倍率，用法如下：
        useMagnifier: true,
        magnification: 1.5,
        squeeze: 1,
        children: <Widget>[
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
        ],
      ),
    );
  }