时间戳

首页 > 解决方案 > 在颤动中格式化按钮和嵌套ListView

flutter - 在颤动中格式化按钮和嵌套ListView

问题描述

对于下面给出的代码，我的最终目标是创建一个垄断板（框需要进一步分为列表视图和网格视图，中心框最终将成为板）

该页面以横向模式显示（如果有任何区别）。

但是我面临以下问题

  1. 框在屏幕顶部对齐，并且文本不在屏幕中间居中，即使我通过将 heightfactor 设置为 1.55 设法将按钮置于底部，文本仍保持在原位并且不会中心化本身

  2. 如果我尝试在网格元素中嵌套一个列表视图以进一步划分它们，我会得到一个空白屏幕，列表应该在哪里（最大的问题）

  3. 尽管将按钮设置为蓝色，但按钮仍显示为灰色（我仅将按钮用作占位符，直到我对应用程序的其余部分进行编码，因此外观对我没有影响，这只是出于好奇，因为相同的代码对于按钮适用于我的其他页面）

class StartGame extends StatefulWidget {
  @override
  _StartGameState createState() => _StartGameState();
}

class _StartGameState extends State<StartGame> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(10),
          child: Expanded(
            child: GridView.count(
              crossAxisCount: 3,
              children: <Widget>[
                FractionallySizedBox(
                    widthFactor: 0.7,
                    heightFactor: 1.55,
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: RaisedButton(
                          color: Colors.blue,
                          child: Text('left'),
                          onPressed: null),
                    )),
                FractionallySizedBox(
                    widthFactor: 1.55,
                    heightFactor: 1.55,
                    alignment: Alignment.center,
                    child: RaisedButton(onPressed: null)),
                FractionallySizedBox(
                    widthFactor: 0.7,
                    heightFactor: 1.55,
                    alignment: Alignment.centerRight,
                    child: Container(
                      child: RaisedButton(
                          color: Colors.blue,
                          child: Text('right'),
                          onPressed: null),
                    )),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

解决方案

如果我没有弄错问题，你可以这样做

import 'package:flutter/material.dart';

class StartGame extends StatefulWidget {
  @override
  _StartGameState createState() => _StartGameState();
}

class _StartGameState extends State<StartGame> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        // Colum aligns widgets vertically
        child: Column(
          // You can align columns with these. TRY IT YOURSELF
          mainAxisAlignment: MainAxisAlignment.center,
          // crossAxisAlignment: CrossAxisAlignment.center,
          children: [
           Container(
              width: double.infinity,
              height: 50,
              decoration: BoxDecoration(color: Colors.green),
              child: Text("Colum"),
            ),
            // To leave a space of height 5
            SizedBox(height: 5,),
            // Row aligns widgets horizontally
            Row(
              // You can align Row with these. TRY IT YOURSELF
              // crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  // MediaQuery.of(context).size.width=>Screen Width
                  //MediaQuery.of(context).size.height => Screen Height
                  width: MediaQuery.of(context).size.width * 0.1,
                  height: MediaQuery.of(context).size.height * 0.5,
                  decoration: BoxDecoration(color: Colors.red),
                  child: FlatButton(
                    child: Text("Left"),
                    onPressed: null,
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  height: MediaQuery.of(context).size.height * 0.5,
                  decoration: BoxDecoration(color: Colors.blue),
                  child: FlatButton(
                   child: Text("Middle"),
                   onPressed: null,
                 ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width * 0.1,
                  height: MediaQuery.of(context).size.height * 0.5,
                  decoration: BoxDecoration(color: Colors.green),
                  child: FlatButton(
                    child: Text("Right"),
                    onPressed: null,
                  ),
               )
              ],
            ),
            SizedBox(height: 5,),
            Container(
              width: double.infinity,
              height: 50,
              decoration: BoxDecoration(color: Colors.green),
              child: Text("Colum 2"),
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读