Flutter页面内容可点击，可滑动，底部固定按钮

梦里梦外; 2022-11-22 03:06 573阅读 0赞

## 先看看效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70_pic_center]

## 上代码 ##

*  需要中间滑动，然后固定底部按钮

Expanded( // 这个页面是要滑动的，所以用Expanded
       child:SingleChildScrollView(
         child:xxx()
         )
    ),

*  页面不需要滑动，直接固定底部按钮

Spacer(),  // 不需要滑动的页面可以直接用这个

*  完整代码

import 'package:flutter/material.dart';
    
    import 'package:interviewer_app/common/component_index.dart';
    
    class MyChooseList extends StatefulWidget { 
      MyChooseList({ Key key, this.chooseType}) : super(key: key);
    
      final chooseType;
    
      @override
      _ChooseList createState() => _ChooseList();
    }
    
    // 添加表单列表
    class _ChooseList extends State<MyChooseList> { 
      int currentItem = 1; // 新增本行
    
      // final chooseType;
      final List dataList = [
        { 'id': 1, 'title': '表单名称1'},
        { 'id': 2, 'title': '表单名称2'},
        { 'id': 3, 'title': '表单名称3'},
        { 'id': 4, 'title': '表单名称3'},
        { 'id': 5, 'title': '表单名称3'},
        { 'id': 6, 'title': '表单名称3'},
        { 'id': 7, 'title': '表单名称3'},
        { 'id': 8, 'title': '表单名称3'},
        { 'id': 9, 'title': '表单名称3'},
        { 'id': 10, 'title': '表单名称3'},
        { 'id': 11, 'title': '表单名称3'},
        { 'id': 12, 'title': '表单名称12'},
      ];
    
      List<Widget> _listView(context) { 
        List<Widget> listWidget = [];
        // final bool alreadySaved = _saved.contains(e['id']);
        dataList.map((e) => { 
        listWidget.add(
          listItem(e)
        )
          }).toList();
        return listWidget;
      }
    
      Widget listItem(item) { 
        // print(item);
        final bool alreadySaved = currentItem == item['id'];
        return ListTile(
              title:Text(item['title']),
              trailing:Image.asset(
                alreadySaved ? Utils.getImgPath('checked') : Utils.getImgPath('unchecked'),
                width: 22.0,
                fit: BoxFit.fill,
                height: 22.0,
              ),
              onTap: () { 
                setState(() { 
                  currentItem = item['id'];
                });
              }
        );
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(
              title: Text("添加表单"),
            ),
            body:
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[Text('请选择要添加的表单')]
                    ),
                    Expanded( // 这个页面是要滑动的，所以用Expanded
                      child:SingleChildScrollView(
                        child:
                    Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: _listView(context),
                    ),
                      )
                    ),
                    // Spacer(), // 不需要滑动的页面可以直接用这个
                    new RoundButton(
                      text: "下一步",
                        bgColor:
                      margin: EdgeInsets.only(top: 20),
                      onPressed: () { 
                        // _userLogin();
                      },
                    ),
                  ]
              ),
            ),
        );
      }
    }

## 公众号 ##

欢迎大家关注我的公众号： 石马上coding，一起成长  
![石马上coding][coding]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/684bd7b304af456da81d85665bce5fd6.png
[coding]: /images/20221120/bea9efde835d49f38eb7794c7967d2ae.png