我很难对齐组件小部件、html 组件、反应组件等

如何解决我很难对齐组件小部件、html 组件、反应组件等

我是 Flutter 的新手。但是，我很难对齐小部件。过去我也尝试过学习 CSS。其中最重要的部分是对齐 html 组件。

有很多属性，例如填充、边距、对齐、crossAxisalignment 等。实际上，我知道在哪里使用这些属性，但是当我使用它们时，结果并不是我所期望的。

然而，我想如果我能学会如何在颤振中对齐。在所有其他人中定位会更容易。例如，我需要学习如何定位手机右侧和底部的调色板。每次当我需要找到类似的东西时，我都会搜索它并找到解决方案。这需要我花费很多时间。那么，学习如何定位该小部件的最佳方法是什么。我可以使用任何来源吗？

代码如下：

import 'package:Flutter/material.dart';

class Todo extends StatefulWidget {
  @override
  _TodoState createState() => _TodoState();
}

class _TodoState extends State<Todo> {
  TextEditingController _controller = new TextEditingController();
  List colors = [ Colors.grey[800],Colors.deepPurpleAccent,Colors.teal,Colors.Amber];
  int index=0;
  String _text;
  int _maxLength = 30;
  @override
  Widget build(BuildContext context) {

    final bottom = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      backgroundColor:colors[index],resizetoAvoidBottomInset: false,resizetoAvoidBottomPadding: false,body: SingleChildScrollView(
        reverse: true,child: Container(
          padding: EdgeInsets.fromLTRB(0,50,bottom),child: Stack(
            children: [
              TextField(
                style: TextStyle(color: Colors.white),maxLengthEnforced: true,maxLength: _maxLength,onTap: null,controller: _controller,autocorrect: false,textCapitalization: TextCapitalization.sentences,onChanged: (String text) {
                  if (text.length <= _maxLength)
                    _text = text;
                  else
                    _controller.text = text;
                },decoration: Inputdecoration(
                  focusColor: Colors.red,border: OutlineInputBorder(),fillColor: Colors.white,),TextField(
                style: TextStyle(color: Colors.white),maxLines: null,decoration: Inputdecoration(
                  focusedBorder: InputBorder.none,enabledBorder: InputBorder.none,errorBorder: InputBorder.none,disabledBorder: InputBorder.none,Positioned(
              right: 5,bottom: 0,child: IconButton(
                icon: Image.asset('assets/colorize.png'),tooltip: 'Closes app',onpressed: (){
                  setState(() {
                    if(index<colors.length)
                      index++;
                    if(index==colors.length)
                      index=0;
                    print("index: " + index.toString() + " len: " +colors.length.toString());
                  });

                },)
            ],);
  }
}

解决方法

您可以使用定位小部件，这将使您可以自由地在堆栈内定位对象，但是如果您希望定位更准确/更清晰（仍然可以使用定位小部件实现），您可以使用 Row 和列小部件，

请参考 flutter 文档 For Row Widget

他们有一些交互式示例可供实验，根据您的需要，我会做的是使用“MediaQuery.of(context).size.height 和 MediaQuery.of(context).size.width”并减少图标大小，或者您也可以这样做，

这会将您的调色板放置在屏幕的右下角，并且仍然可以选择将其他小部件添加到您的应用中，

Stack(
      children: [
        Positioned(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.end,children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,children: [Text("Hello")],)
          ],))
      ],);

您会在屏幕右下角找到上面代码的“Hello”。 用您自己的选择和快乐编码替换文本小部件:)

,

我找到了答案。只需要在 floatingActionButton 之外使用 SingleChildScrollView。因此，color palette will stick into bottom-wight.

这是代码

    floatingActionButton: IconButton(
        icon: Image.asset('assets/colorize.png'),tooltip: 'Closes app',onPressed: () {
          setState(() {
            if (index < colors.length) index++;
            if (index == colors.length) index = 0;
            print("index: " +
                index.toString() +
                " len: " +
                colors.length.toString());
          });
        },),