如何对齐列表视图中的底部容器？

Question

我想在列表视图的底部中间放置一个按钮。

Scaffold(
  backgroundColor: Colors.white,
  appBar: buildAppBar(context, ''),
  body: ListView(
    physics: ClampingScrollPhysics(),
    children: [
      Column(
        children: [
          Text(
            'check up',
            style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          SizedBox(height: 12),
          Text(
            'SachsenwaldStr. 3. 12157 Berlin',
            style: TextStyle(
              fontSize: 20,
              color: Colors.black,
            ),
          ),
        ],
      ),
      Spacer(),
      buildNextButton(context),
    ],
  ),

我试过使用 Align，但没有用，Spacer() 也没有：

  Align(
        alignment: Alignment.bottomCenter,
        child: buildNextButton(context),
      ),

有什么方法可以让 buildNextButton 对齐到底部吗？

Answer 1

您可以使用 Expanded 包装 Align 小部件，并在 Align 小部件中使用 alignment: FractionalOffset.bottomCenter .

请在下面找到 link 以获得更清晰的想法 -

Answer 2

我建议用 Stack Widget 包装 ListView 和 builtNextButton。
因为当 ListView children 大于屏幕高度时，按钮不能位于底部。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget buildNextButton(context) {
    return Container(height: 40, color: Colors.green);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        //appBar: buildAppBar(context, ''),
        body: Stack(
          children: [
            ListView(
              physics: const ClampingScrollPhysics(),
              children: [
                Column(
                  children: [
                    Text(
                      'check up',
                      style: TextStyle(
                        fontSize: 35,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    SizedBox(height: 12),
                    Text(
                      'SachsenwaldStr. 3. 12157 Berlin',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: buildNextButton(context),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

现在，您可以在列表视图中使用它的唯一方法是将其传递到列小部件中，因此顺序将变为，列 -> 扩展 -> ListView 和扩展之外，这就是你的位置现在通过按钮。只需将我的代码复制并粘贴到此处，希望对您有用。

Scaffold(

  body: Column(
    children: [
      Expanded(
        child: ListView(
          // physics: ClampingScrollPhysics(),
          children: [
            Column(
              children: [
                Text(
                    'check up',
                    style: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),

                SizedBox(height: 12),
             Text(
                    'SachsenwaldStr. 3. 12157 Berlin',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                    ),
                  ),

              ],
            ),

            // buildNextButton(context),
          ],
        ),
      ),
      Container(
        child: Center(
          child: buildNextButton()
        ),
      )
    ],
  ),
)

然后buildNextButton代码是

 buildNextButton() {
  return  ElevatedButton(
      style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20))
      ,
      onPressed: () {},
      child: const Text('Enabled'),
    );
  }

当您将列表视图呈现为父小部件时，它会自动一个接一个地呈现列表中的所有项目。

任何问题，我可以帮助你祝你好运兄弟

Answer 4

 return Scaffold(
    body: Stack(
  children: [
    Positioned(
      bottom: 0,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: MaterialButton(
          child: Text("My button"),
          onPressed: () {},
          color: Colors.red,
        ),
      ),
    ),
    ListView(
      children: [
        Text(
          'check up',
          style: TextStyle(
            fontSize: 35,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 12),
        Text(
          'SachsenwaldStr. 3. 12157 Berlin',
          style: TextStyle(
            fontSize: 20,
            color: Colors.black,
          ),
        ),
      ],
    )
  ],
));

Answer 5

You can use Scaffold Properties to make a button centre at the bottom. Hope it would be helpful for you,Thanks

import 'package:flutter/material.dart';

class BottomButton extends StatefulWidget {

  const BottomButton({Key? key}) : super(key: key);

  @override
  _BottomButtonState createState() => _BottomButtonState();

}

class _BottomButtonState extends State<BottomButton> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      ///you can make the centre button use floating action Button and 
         provide its location

      floatingActionButton: FloatingActionButton(

        backgroundColor: Colors.transparent,
        child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            child: Text(
            "Button")),
            onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        title: Text("MyAppBar"),
      ),
      body: ListView(
        physics: ClampingScrollPhysics(),
        children: [
          Column(
            children: [
              Text(
                'check up',
                style: TextStyle(
                  fontSize: 35,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 12),
              Text(
                'SachsenwaldStr. 3. 12157 Berlin',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ],
      ),

      ///bottom sheet place button at bottom without using space
      bottomSheet: Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.green,
          child: TextButton(onPressed: () {}, child: Text("Button"))),
    );
  }
}

如何对齐列表视图中的底部容器？

How to align bottom container inside listview?

flutter

listview

vertical-alignment