android 如何在抖动屏幕的特定区域内创建列表

iq3niunx 于 2023-06-20 发布在 Android

关注(0)|答案(3)|浏览(189)

我是Flutter开发的新手，在屏幕的页眉和页脚区域创建可滚动列表时遇到了麻烦。页眉和页脚数据将是固定的，而列表将是可滚动的。我已经包括了我试图实现的设计的示例图像：

屏幕标题将固定，然后是屏幕顶部的文本1、2、3和4。之后，将有一个可滚动的列表，其中可以包含任何数量的数据。最后，还有一个页脚区域的一些文本，也将固定在屏幕的底部。
先谢谢你了。

android

来源：https://stackoverflow.com/questions/76487231/how-to-create-list-inside-the-specific-area-of-screen-in-flutter

3条答案

按热度按时间

92vpleto1#

对于给定的设计，您可以参考以下代码：

import 'package:flutter/material.dart';
class ScreenDesign extends StatefulWidget {
  const ScreenDesign({Key? key}) : super(key: key);
  @override
  State<ScreenDesign> createState() => _ScreenDesignState();
}
class _ScreenDesignState extends State<ScreenDesign> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Tittle',
        ),
      ),
      body: Column(children: [
        _headerWidgets(),
        _listViewWidget([
          'List Item 1',
          'List Item 2',
          'List Item 3',
          'List Item 4',
          'List Item 5',
          'List Item 6',
          'List Item 7',
          'List Item 8',
          'List Item 9',
          'List Item 10',
          'List Item 11',
          'List Item 12',
          'List Item 13',
          'List Item 14',
          'List Item 15',
        ]),
        _footerWidgets()
      ]),
    );
  }
  Widget _headerWidgets() {
    return const Expanded(
      child: Column(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('Text 1'),
                Text('Text 2'),
              ],
            ),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('Text 3'),
                Text('Text 4'),
              ],
            ),
          ),
        ],
      ),
    );
  }
  Widget _listViewWidget(List<String> dataList) {
    return Expanded(
      flex: 6,
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: dataList.length,
          itemBuilder: (context, index) => ListTile(
                title: Text(dataList[index]),
              )),
    );
  }
  Widget _footerWidgets() {
    return const Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text('Text 5'),
          Text('Text 6'),
          Text('Text 7'),
        ],
      ),
    );
  }
}

在这里，如果你想改变页眉，页脚或listView的大小，你可以在扩展的小部件中添加flex，就像我给 Package listView的扩展小部件一样。
如果你想让页脚留在屏幕底部，而listView数据在页脚后面，那么你只需要从名为bottomSheet的scaffold属性返回_footerWidgets。

展开查看全部

赞(0）回复(0）举报 2023-06-20

iibxawm42#

试试下面的代码希望对你有帮助。参考我在下面的代码中使用过的小部件-Expanded，Column，Row，basics widgets

class ListPage extends StatelessWidget {
  const ListPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    List dataList = [
      'List Item 1',
      'List Item 2',
      'List Item 3',
      'List Item 4',
      'List Item 5',
      'List Item 6',
      'List Item 7',
      'List Item 8',
      'List Item 9',
      'List Item 10',
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen Title'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellow.shade300,
              child: const Column(
                children: [
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text('Text 1'),
                        Text('Text 2'),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text('Text 3'),
                        Text('Text 4'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: dataList.length,
              itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        border: Border.all(color: Colors.black)),
                    child: ListTile(
                      title: Text(
                        dataList[index],
                        textAlign: TextAlign.center,
                      ),
                    ),
                  )),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orange.shade300,
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text('Text 5'),
                  Text('Text 6'),
                  Text('Text 7'),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

结果屏幕-> x1c 0d1x

展开查看全部

赞(0）回复(0）举报 2023-06-20

z3yyvxxp3#

您可以尝试这个解决方案的基本，但您可以自定义它的方式你想要的

import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Title"),
        backgroundColor: Colors.blueAccent,
        toolbarHeight: MediaQuery.of(context).size.height * .075,
      ),
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .2,
            decoration: BoxDecoration(color: Colors.amber),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Text1"),
                    Text("Text2"),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Text3"),
                    Text("Text4"),
                  ],
                ),
              ],
            ),
          ),
          Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height * .475,
              decoration: BoxDecoration(color: Colors.grey),
              child: ListView.builder(
                  itemCount: 10,
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(
                          height: 15,
                        ),
                        Center(
                            child: Container(
                          width: MediaQuery.of(context).size.width * .75,
                          height: 70,
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.black,
                              width: 1,
                            ),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            "List view item ${index + 1}",
                            style: TextStyle(
                              fontSize: 20,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        )),
                        const SizedBox(
                          height: 15,
                        ),
                      ],
                    );
                  })),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .15,
            decoration: BoxDecoration(color: Colors.amber),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Text1"),
                Text("Text2"),
                Text("Text3"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

展开查看全部

赞(0）回复(0）举报 2023-06-20

我来回答

android 如何在抖动屏幕的特定区域内创建列表

3条答案

相关问题

热门标签

最新问答