Flutter页面内容可点击，可滑动，底部固定按钮-蒲公英云

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

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

先看看效果

在这里插入图片描述

上代码

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

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 {
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 _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();
              },
            ),
          ]
      ),
    ),
);