如何修复 Top Flutter 中的布局答案

【问题标题】：How to Fix layout in Top Flutter如何修复 Top Flutter 中的布局
【发布时间】：2020-09-09 07:17:58
【问题描述】：

如何修复 Top Flutter 中的布局我无法将框颜色固定到顶部 .................................... ..................................................... ..................................................... ..................................................... ..................................................

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController controllernum1 = TextEditingController();
  final TextEditingController controllernum2 = TextEditingController();
  final TextEditingController controllernum3 = TextEditingController();
  String text = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.fromLTRB(5, 15, 5, 0),
              child: Row(
                children: <Widget>[
                  Expanded(
                      child: Container(
                    child: Column(
                      children: [
                        new Flexible(
                          child: new TextField(
                              controller: controllernum1,
                              decoration:
                                  const InputDecoration(hintText: 'Red 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum2,
                              decoration: const InputDecoration(
                                  hintText: 'Green 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum3,
                              decoration:
                                  const InputDecoration(hintText: 'Blue 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        )
                      ],
                    ),
                  )),
                  Expanded(
                      child: Container(
                    width: 100,
                    height: 150,
                    decoration: BoxDecoration(
                      color: Color(0xff7c94b6),
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                    // )
                  )),
                ],
              ))),
    );
  }
}

我的结果

enter image description here

我想要这个布局 enter image description here

【问题讨论】：

请检查解决方案

标签： flutter

【解决方案1】：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController controllernum1 = TextEditingController();
  final TextEditingController controllernum2 = TextEditingController();
  final TextEditingController controllernum3 = TextEditingController();
  String text = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.fromLTRB(5, 15, 5, 0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start, // I added .
                children: <Widget>[
                  Expanded(
                      child: Container(
                    child: Column(
                      children: [
                        new Flexible(
                          child: new TextField(
                              controller: controllernum1,
                              decoration:
                                  const InputDecoration(hintText: 'Red 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum2,
                              decoration: const InputDecoration(
                                  hintText: 'Green 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum3,
                              decoration:
                                  const InputDecoration(hintText: 'Blue 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        )
                      ],
                    ),
                  )),
                  Expanded(
                      child: Container(
                    width: 100,
                    height: 150,
                    decoration: BoxDecoration(
                      color: Color(0xff7c94b6),
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                    // )
                  )),
                ],
              ))),
    );
  }
}

【讨论】：

【解决方案2】：

这是您的解决方案。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController controllernum1 = TextEditingController();
  final TextEditingController controllernum2 = TextEditingController();
  final TextEditingController controllernum3 = TextEditingController();
  String text = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.fromLTRB(5, 15, 5, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      width: MediaQuery.of(context).size.width * .5,
                      child: Column(
                        children: [
                          new Flexible(
                            child: new TextField(
                                controller: controllernum1,
                                decoration: const InputDecoration(
                                    hintText: 'Red 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          ),
                          new Flexible(
                            child: new TextField(
                                controller: controllernum2,
                                decoration: const InputDecoration(
                                    hintText: 'Green 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          ),
                          new Flexible(
                            child: new TextField(
                                controller: controllernum3,
                                decoration: const InputDecoration(
                                    hintText: 'Blue 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      width: 100,
                      height: 150,
                      decoration: BoxDecoration(
                        color: Color(0xff7c94b6),
                        border: Border.all(
                          color: Colors.black,
                        ),
                      ),
                      // )
                    ),
                  ),
                ],
              ))),
    );
  }
}

【讨论】：