Flutter）如何在listview中對齊底部容器

嗨，我正在重構我們的代碼

我遇到了一些問題。

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),
    ],
  ),

所以需要把，buildNextButton'底部中心但是

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

沒用

還有 Spacer()

有沒有什么好的方法也可以在底部對齊 buildNextButton

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

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



 

uj5u.com熱心網友回復：

您可以Align使用Expanded和在Align小部件使用中包裝您的小部件alignment: FractionalOffset.bottomCenter。

請找到下面的鏈接以獲得更清晰的想法 -

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

uj5u.com熱心網友回復：

現在，您可以在串列視圖中使用它的唯一方法是將其傳遞到列小部件中，因此順序將變為列 -> 擴展 -> 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'),
    );
  }

當您將串列視圖呈現為父小部件時，它會自動呈現 alist 中的所有專案，一個接一個。

有任何問題，我可以幫助你 祝你好運兄弟

標籤：

上一篇：帶有彩色形狀的JavaFXComboBox

下一篇：Android文本中斷，右側有按鈕