Question

我已经拉伸并扩展了列以填充灰色。但是，我看到这些细线似乎没有完全展开或伸展。我发现这个link指出这是一个抗锯齿问题，并尝试了他们的建议，即用另一个容器包装该容器。线条不太明显，但仍然存在。有什么办法可以解决这个问题？

not sure where these lines are coming from

main.dart

import 'package:flutter/material.dart';
import 'input_page.dart';

void main() => runApp(Calculator());

class Calculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InputPage(),
      theme: ThemeData.dark().copyWith(
        primaryColor: Colors.black,
        // accentColor: Colors.purple,
        scaffoldBackgroundColor: Color(0xFF000000),
        textTheme: TextTheme(
          bodyText2: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

input_page.dart

import 'package:flutter/material.dart';
import 'main.dart';
import 'reuseable_button.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: [
        Expanded(
            flex: 3,
            child: Column(
              children: [
                Expanded(flex: 5, child: Row()),
                Expanded(
                    child: Row(
                  children: [
                    ReuseableButton(value: '1'),
                    ReuseableButton(value: '2'),
                    ReuseableButton(value: '3'),
                  ],
                )),
                Expanded(
                    child: Row(
                  children: [
                    ReuseableButton(value: '4'),
                    ReuseableButton(value: '5'),
                    ReuseableButton(value: '6'),
                  ],
                )),
                Expanded(
                    child: Row(
                  children: [
                    ReuseableButton(value: '7'),
                    ReuseableButton(value: '8'),
                    ReuseableButton(value: '9'),
                  ],
                )),
                Expanded(
                    child: Row(
                  children: [
                    ReuseableButton(value: '.'),
                    ReuseableButton(value: '0'),
                    ReuseableButton(value: '='),
                  ],
                )),
              ],
            )),
        Expanded(flex: 1, child: Column())
      ],
    ));
  }
}

reuseable_button.dart

import 'package:flutter/material.dart';

class ReuseableButton extends StatelessWidget {
  ReuseableButton({this.value});
  final String value;

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: Container(
            color: Colors.grey,
            child: Align(
              child: Text(value),
              alignment: Alignment.center,
            ),
          ),
        )
      ],
    ));
  }
}

Answer 1

我再次测试了您的代码，并将每个具有行子项或列子项以及容器容器的Expanded小部件包装在InputPage和ReuseableButton类中，并为它们设置颜色，如下面的代码，它解决了问题：

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: [
        Expanded(
            flex: 3,
            child: Column(
              children: [
                Expanded(flex: 5, child: Row()),
                Expanded(
                    child: Container(
                  color: Colors.grey,
                  child: Row(
                    children: [
                      ReuseableButton(value: '1'),
                      ReuseableButton(value: '2'),
                      ReuseableButton(value: '3'),
                    ],
                  ),
                )),
                Expanded(
                    child: Container(
                  color: Colors.grey,
                  child: Row(
                    children: [
                      ReuseableButton(value: '4'),
                      ReuseableButton(value: '5'),
                      ReuseableButton(value: '6'),
                    ],
                  ),
                )),
                Expanded(
                    child: Container(
                  color: Colors.grey,
                  child: Row(
                    children: [
                      ReuseableButton(value: '7'),
                      ReuseableButton(value: '8'),
                      ReuseableButton(value: '9'),
                    ],
                  ),
                )),
                Expanded(
                    child: Container(
                  //color: Colors.grey,
                  child: Row(
                    children: [
                      ReuseableButton(value: '.'),
                      ReuseableButton(value: '0'),
                      ReuseableButton(value: '='),
                    ],
                  ),
                )),
              ],
            )),
        Expanded(flex: 1, child: Column())
      ],
    ));
  }
}

class ReuseableButton extends StatelessWidget {
  ReuseableButton({this.value});
  final String value;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color: Colors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                color: Colors.grey,
                child: Align(
                  child: Text(value),
                  alignment: Alignment.center,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

不知道这些线从哪里来

1 个答案: