Question

我才刚刚起步，我想在文字下方放一个按钮。但是我不知道该怎么办。而且我遇到这个错误。它说“已为命名参数“ child”指定了参数”，我不知道如何解决该错误

            body: Container(

              decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.amberAccent, Colors.red]
                ),
              ),
              child: Center(
                child: Text('Welcome', style: TextStyle(
                    fontSize: 50.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white)
                ),
              ),
             child: RaisedButton(onPressed: (){},child: Text('Button'),)
          ),
          ),
        );

Answer 1

使用Column

Column(
  children: <Widget>[
    Text("Welcome"),
    RaisedButton(onPressed: () {}, child: Text("Button")),
  ],
);

完整解决方案：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.amberAccent, Colors.red]
    ),
  ),
  child: Center(
    child: Column( // add Column
    mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Welcome', style: TextStyle( // your text
            fontSize: 50.0,
            fontWeight: FontWeight.bold,
            color: Colors.white)
        ),
        RaisedButton(onPressed: () {}, child: Text('Button'),), // your button beneath text
      ],
    ),
  ),
),

Answer 2

CopsOnRoad 为您提供更好的解决方案，
如果要添加中心而不是使用“中心”窗口小部件，则将其对齐以其父项为中心。

Center (
 child :Container(
 decoration: BoxDecoration(
 gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.amberAccent, Colors.red]
  ),
 ),
child: Center(
child: Column( // add Column
  children: <Widget>[
    Text('Welcome', style: TextStyle( // your text
        fontSize: 50.0,
        fontWeight: FontWeight.bold,
        color: Colors.white)
    ),
    RaisedButton(onPressed: () {}, child: Text('Button'),), // your button
  ],
  ),
 ),
),
),

Answer 3

不要使用 RaisedButton，它已被弃用。这是一个代码示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Push the button',
            ),
            ElevatedButton(
              style: style,
              onPressed: null,
              child: const Text('Start'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter：如何在文本下添加按钮

3 个答案: