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

最新推荐文章于 2024-05-07 14:22:16 发布

墨墨博客

最新推荐文章于 2024-05-07 14:22:16 发布

阅读量5.7k

点赞数 2

分类专栏： Flutter 文章标签： flutter dart 列表固定按钮单选点击

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/109469776

版权

Flutter 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

先看看效果

在这里插入图片描述

上代码

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

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