我的 ElevatedButton 的宽度没有减少

Question

Elevated Button 的宽度并没有减少，而是占据了 screen.The 父小部件的所有宽度 ListView.I 甚至试图通过 ButtomTheme 减少它，但它仍然无法正常工作。我已经添加了下面的代码。我到处都看到减少宽度的方法是这个way.But不知道为什么它不减少宽度

          ListView(
          children: [
            Row(
              children: [
                RotatedBox(
                  quarterTurns: 3,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 30.0),
                    child: Text(
                      'Sign Up',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 50,
                          fontFamily: 'Pacifico'),
                    ),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Text(
                  'BRUXTER',
                  style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'RockSalt',
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                )
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Form(
              child: Column(
                children: [
                  TextFormField(
                    style: TextStyle(color: Colors.black, fontSize: 30),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter Your Name',
                      hintStyle: TextStyle(color: Colors.white60),
                    ),
                  ),
                  TextFormField(
                    style: TextStyle(color: Colors.black, fontSize: 30),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter Your Email',
                      hintStyle: TextStyle(color: Colors.white60),
                    ),
                  ),
                  TextFormField(
                    style: TextStyle(color: Colors.black, fontSize: 30),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Enter Your PassWord',
                      hintStyle: TextStyle(color: Colors.white60),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              width: MediaQuery.of(context).size.width *
                  0.5, // Will take 50% of screen space
              child: ElevatedButton(
                child: Text('Go to screen two'),
                onPressed: () {},
              ),
            )
            
          ],

Answer 1

请参考以下代码

在容器小部件中用边距替换宽度

Container(
//               Replace width with margin
              margin: EdgeInsets.symmetric(horizontal: 80.0,),
              
//               width: MediaQuery.of(context).size.width *
//                   0.5, // Will take 50% of screen space
              child: ElevatedButton(
                
                child: Text('Go to screen two'),
                onPressed: () {},
              ),
            )

完整代码

import 'package:flutter/material.dart';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: [
      Row(
        children: [
          RotatedBox(
            quarterTurns: 3,
            child: Padding(
              padding: const EdgeInsets.only(right: 30.0),
              child: Text(
                'Sign Up',
                style: TextStyle(
                    color: Colors.white, fontSize: 50, fontFamily: 'Pacifico'),
              ),
            ),
          ),
          SizedBox(
            width: 20,
          ),
          Text(
            'BRUXTER',
            style: TextStyle(
                fontSize: 30,
                fontFamily: 'RockSalt',
                color: Colors.black,
                fontWeight: FontWeight.bold),
          )
        ],
      ),
      SizedBox(
        height: 50,
      ),
      Form(
        child: Column(
          children: [
            TextFormField(
              style: TextStyle(color: Colors.black, fontSize: 30),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter Your Name',
                hintStyle: TextStyle(color: Colors.white60),
              ),
            ),
            TextFormField(
              style: TextStyle(color: Colors.black, fontSize: 30),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter Your Email',
                hintStyle: TextStyle(color: Colors.white60),
              ),
            ),
            TextFormField(
              style: TextStyle(color: Colors.black, fontSize: 30),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter Your PassWord',
                hintStyle: TextStyle(color: Colors.white60),
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        height: 20,
      ),
      Container(
//               Replace width with margin
        margin: EdgeInsets.symmetric(
          horizontal: 80.0,
        ),

//               width: MediaQuery.of(context).size.width *
//                   0.5, // Will take 50% of screen space
        child: ElevatedButton(
          child: Text('Go to screen two'),
          onPressed: () {},
        ),
      )
    ]);
  }
}

Answer 2

您需要将 ListView 替换为 Column

Column(
        children: [
          Row(
            children: [
              RotatedBox(
                quarterTurns: 3,
                child: Padding(
                  padding: const EdgeInsets.only(right: 30.0),
                  child: Text(
                    'Sign Up',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 50,
                        fontFamily: 'Pacifico'),
                  ),
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Text(
                'BRUXTER',
                style: TextStyle(
                    fontSize: 30,
                    fontFamily: 'RockSalt',
                    color: Colors.black,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
          SizedBox(
            height: 50,
          ),
          Form(
            child: Column(
              children: [
                TextFormField(
                  style: TextStyle(color: Colors.black, fontSize: 30),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Enter Your Name',
                    hintStyle: TextStyle(color: Colors.white60),
                  ),
                ),
                TextFormField(
                  style: TextStyle(color: Colors.black, fontSize: 30),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Enter Your Email',
                    hintStyle: TextStyle(color: Colors.white60),
                  ),
                ),
                TextFormField(
                  style: TextStyle(color: Colors.black, fontSize: 30),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Enter Your PassWord',
                    hintStyle: TextStyle(color: Colors.white60),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            width: MediaQuery.of(context).size.width *
                0.5, // Will take 50% of screen space
            child: ElevatedButton(
              child: Text('Go to screen two'),
              onPressed: () {},
            ),
          )
        ],
      )

Answer 3

在大多数情况下，出于性能原因，我实际上建议继续使用 ListView，而不是使用 Column。您还可以通过将 Container 包装在 Center 小部件中来解决此问题（如果您想要不同于居中的对齐方式，则可以将 Align 包装起来）。这些小部件为其子部件提供宽松的约束，因此它们可以是他们想要的任何大小，但不能大于父部件，这正是您在这种情况下想要的。

它在你的情况下不起作用，因为 ListView 强制子项占据整个宽度，所以忽略直接子项想要占据的大小。

我的 ElevatedButton 的宽度没有减少

Width of my ElevatedButton is not reducing

flutter

flutter-layout