如何將一個小部件放在螢屏頂部，另一個放在底部？

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(children: [
        Column(
          children: [
            Expanded(child: Text('Hello')),
            Expanded(child: Text('Nithya'))
          ],
        )
      ]),
    );
  }
}

我希望整個頁面是可滾動的，并且小部件在垂直之間放置空間。嘗試使用 SingleChildScrollView 而不是 ListView 但這也不起作用。我嘗試用同樣不起作用的靈活替換擴展。如何將文本小部件一個放在頂部，另一個放在底部。

uj5u.com熱心網友回復：

請參閱下面的作業代碼

解釋 ：

您可以使用 Scaffold 根小部件 body 屬性將整個螢屏設定為 body ...

我使用 Column 小部件將我們所有的 body 小部件在垂直方向上對齊。

mainAxisAlignment: MainAxisAlignment.spaceBetween.

MainAxisAlignment 列內充當垂直對齊方式。

我在 Column.above 代碼中宣告了兩個文本小部件，據說會顫動，使我的兩個文本小部件一個到頂部，另一個到底部...

就是這樣，您可以將其作為模板。

如果您需要使其可滾動，您可以使用 SingleChildScrollView Widget 包裝它...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text(
                  "Hello"
              ),
              Text(
                  "Nithya"
              ),
            ],

          ),
        ),
      ),
    );
  }

uj5u.com熱心網友回復：

如果您的意思是將 2 個小部件固定在頂部和底部，請使用Stack.

例如：

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          ListView(
            children: Colors.primaries.map((color) {
              return Container(
                color: color,
                height: 100,
              );
            }).toList(),
          ),
          const Align(
            alignment: Alignment.topCenter,
            child: Text(
              'Hello',
              style: TextStyle(
                fontSize: 70,
              ),
            ),
          ),
          const Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              'Nithya',
              style: TextStyle(
                fontSize: 70,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

uj5u.com熱心網友回復：

您將頂部和底部放在一列中。您在它們之間填充 Expanded 并將 ListView 放入其中：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Top'),
        Expanded(
          child: ListView.builder(
            itemBuilder: (context, i) {
              return Text('Infinite! $i');
            },
          ),
        ),
        Text('Bottom'),
      ],
    );
  }
}

uj5u.com熱心網友回復：

首先，使用 Expanded 小部件意味著您保留螢屏的可用區域，其次將一個文本小部件停靠在頂部，其次，在底部，您應該首先保留螢屏的完整可用高度，方法是將其包裹在SizedBox 小部件第二次洗掉 Expanded 和第三次使用MainAxisAlignment.spaceBetween在列中我只是對您的代碼進行了一些更改，如下所示

ListView(
    children: [
      SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Text('Hello'),
            Text('Nithya'),
          ],
        ),
      )
    ],
  ),

標籤：扑

上一篇：如何在Flutter中使用PodPlayer更改點擊視頻？

下一篇：LateInitializationError：欄位'insertFunction尚未初始化